/* Theme Name: Mistress Ayn (Astra Child) Theme URI: https://mistressayn.com Description: Astra child theme. Overrides Astra defaults, enforces brand typography and palette, and provides component classes for Elementor builds. Author: Oreoluwa Template: astra Version: 2.1.2 Text Domain: mistress-ayn */ /* ===================================================================== 1. DESIGN TOKENS These are the single source of truth. Also output inline in via functions.php (priority 1) so they are available before any plugin or Elementor CSS loads. ===================================================================== */ :root { /* palette */ --ink: #0c0a0b; --ink-soft: #161214; --ink-mid: #1a1418; --paper: #ece4da; --paper-dim: #a89c8f; --paper-faint: #6e635a; --oxblood: #7c1d28; --oxblood-bright: #a8333f; --gold: #b89b6e; --gold-dim: rgba(184,155,110,.22); --line: rgba(184,155,110,.2); /* typography */ --display: "Bodoni Moda", Georgia, serif; --body: "Hanken Grotesk", Arial, sans-serif; } /* ===================================================================== 2. ASTRA OVERRIDE LAYER Kill every white/light background Astra injects on its wrappers so Elementor section backgrounds render correctly. Then force our fonts and colours on top of whatever Astra's customiser outputs. ===================================================================== */ /* 2a — Transparent wrappers Every Astra structural container becomes a transparent pass-through. body itself keeps the dark background (below). */ #page, .site, #content, .site-content, #primary, #main, .ast-container, .ast-row, .ast-separate-container, .ast-two-container, .ast-no-sidebar, .ast-single, .ast-blog, .ast-archive, .ast-search, .ast-page-builder-template, article.post, article.page, article.attachment, article.product, .entry, .entry-content, .entry-summary, .hentry { background: transparent !important; background-color: transparent !important; } /* 2b — Dark body */ html, body { background: var(--ink) !important; background-color: var(--ink) !important; color: var(--paper) !important; } /* 2c — Astra adds padding on .ast-separate-container body classes */ body.ast-separate-container, body.ast-two-container { padding-top: 0 !important; padding-bottom: 0 !important; } /* 2d — Body font: force Hanken Grotesk over any Astra inline style */ body, body p, .ast-body-font-family { font-family: var(--body) !important; font-weight: 300; line-height: 1.65; } /* 2e — Heading font: force Bodoni Moda over any Astra inline style */ h1, h2, h3, h4, h5, h6, .entry-title, .ast-archive-title, .widget-title, .ast-widget-title, .wp-block-heading, .ast-blog-single-element .entry-title, .ast-blog-single-element .entry-title a, .ast-separate-container .entry-title a { font-family: var(--display) !important; font-weight: 400 !important; color: var(--paper) !important; } /* 2f — Links */ a, a:visited { color: var(--gold); text-decoration: none; transition: color .3s; } a:hover { color: var(--paper); } /* 2g — Content padding reset: Astra adds horizontal padding on the content area which creates unwanted gutters in page-builder layouts */ .ast-page-builder-template .ast-container, .ast-page-builder-template .site-content .ast-container { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; } .ast-page-builder-template #primary, .ast-page-builder-template .content-area { padding: 0 !important; max-width: 100% !important; flex: 1 1 100% !important; width: 100% !important; } .ast-page-builder-template .entry-content, .ast-page-builder-template .entry { margin: 0 !important; padding: 0 !important; } /* 2h — Hide Astra's native entry-header (post title/meta) and entry-footer on all Elementor-managed pages and posts */ .elementor-page .entry-header, .elementor-page .entry-footer, .elementor-page .post-navigation, .elementor-page .ast-author-meta, .elementor-page .comments-area, .ast-page-builder-template .entry-header, .ast-page-builder-template .entry-footer, body.elementor-template-full-width .entry-header { display: none !important; } /* 2i — Hide Astra's native site-header when Elementor Theme Builder is serving its own header. The Elementor header renders in in the elementor-location-header element above the content; masthead is redundant. */ header#masthead { display: none !important; } /* 2j — Footer: same principle — hide Astra's footer */ footer#colophon { display: none !important; } /* 2k — Remove Astra's sidebar globally (set to no-sidebar via PHP too) */ #secondary, .ast-sidebar-layout, .ast-right-sidebar #secondary, .ast-left-sidebar #secondary { display: none !important; } /* 2l — Astra breadcrumbs (shown above page content by default) */ .ast-breadcrumbs-wrapper { display: none !important; } /* ===================================================================== 3. GLOBAL BASE ===================================================================== */ html { scroll-behavior: smooth; } /* film-grain noise overlay */ body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Ensure all real content sits above the grain overlay, and the header ALWAYS stacks above page content. NOTE: .elementor-location-header is a CLASS on the
element (not an ID) — Elementor Theme Builder renders it as
*/ #page, .site, .elementor-location-footer, .elementor { position: relative; z-index: 2; } header.elementor-location-header, .elementor.elementor-location-header { position: relative; z-index: 1000 !important; /* beats the .elementor z-index:2 on page content */ } /* Elementor's sticky states — keep on top while scrolling */ .elementor-location-header .elementor-sticky, .elementor-location-header .elementor-sticky--active, .elementor-location-header .elementor-sticky--effects { z-index: 1000 !important; } ::selection { background: var(--oxblood); color: var(--paper); } /* ===================================================================== 4. ELEMENTOR COMPATIBILITY Make Elementor widgets respect the brand by default so even unstyled widgets look on-brand, not generic. ===================================================================== */ /* Heading widget — em tag gets gold italic automatically */ .elementor-heading-title em, .ma-display em { font-style: italic; color: var(--gold); } /* Heading widget default colour (before per-widget override) */ .elementor-widget-heading .elementor-heading-title { color: var(--paper); } /* Text Editor widget */ .elementor-widget-text-editor p { color: var(--paper-dim); line-height: 1.75; } /* Divider widget */ .elementor-widget-divider .elementor-divider-separator { border-color: var(--line) !important; } /* ===================================================================== 5. FORMS & INPUTS ===================================================================== */ input, input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select { background: transparent !important; border: none !important; border-bottom: 1px solid var(--line) !important; color: var(--paper) !important; font-family: var(--body) !important; outline: none; padding: 10px 0; transition: border-color .3s; } input::placeholder, textarea::placeholder { color: var(--paper-faint); } input:focus, textarea:focus { border-bottom-color: var(--gold) !important; } /* ===================================================================== 6. REUSABLE COMPONENT CLASSES Apply these in Elementor via Advanced > CSS Classes. All prefixed ma- to avoid collision with Astra/Elementor internals. ===================================================================== */ /* eyebrow / overline label */ .ma-lbl { font-family: var(--body) !important; font-weight: 500; font-size: .64rem; letter-spacing: .42em; text-transform: uppercase; color: var(--gold) !important; line-height: 1; } /* small gold divider */ .ma-divider { width: 40px; height: 1px; background: var(--gold); margin: 18px 0 24px; } /* ---- Buttons ---- */ /* Apply to Elementor Button widget > Advanced > CSS Classes. If the widget's own Style settings override these, use .elementor-button.ma-btn instead. */ .ma-btn, .elementor-button.ma-btn { font-family: var(--body) !important; font-weight: 500 !important; font-size: .7rem !important; letter-spacing: .2em !important; text-transform: uppercase !important; padding: 15px 32px !important; border: 1px solid var(--gold) !important; background: transparent !important; color: var(--paper) !important; cursor: pointer; transition: background .35s, color .35s, border-color .35s; text-decoration: none; display: inline-block; border-radius: 0 !important; } .ma-btn:hover, .elementor-button.ma-btn:hover { background: var(--gold) !important; color: var(--ink) !important; } .ma-btn.solid, .elementor-button.ma-btn.solid { background: var(--oxblood) !important; border-color: var(--oxblood) !important; color: var(--paper) !important; } .ma-btn.solid:hover, .elementor-button.ma-btn.solid:hover { background: var(--oxblood-bright) !important; border-color: var(--oxblood-bright) !important; } .ma-btn.ghost, .elementor-button.ma-btn.ghost { border-color: rgba(168,156,143,.35) !important; color: var(--paper-dim) !important; background: transparent !important; } .ma-btn.ghost:hover, .elementor-button.ma-btn.ghost:hover { border-color: var(--paper-dim) !important; color: var(--paper) !important; } /* ---- Display heading helper ---- */ .ma-display, .elementor-widget.ma-display .elementor-heading-title { font-family: var(--display) !important; font-weight: 400 !important; line-height: 1.05; color: var(--paper) !important; } .ma-display em { font-style: italic; color: var(--gold); } /* ---- Service / discipline card ---- */ .ma-svc { background: var(--ink); padding: 46px 36px; transition: background .4s; border: 1px solid var(--line); } .ma-svc:hover { background: var(--ink-soft); } .ma-svc .num { font-family: var(--display); font-size: .9rem; color: var(--gold); font-style: italic; display: block; margin-bottom: 28px; } .ma-svc h3, .ma-svc .elementor-heading-title { font-family: var(--display) !important; font-weight: 400; font-size: 1.65rem; margin-bottom: 13px; line-height: 1.15; color: var(--paper) !important; } .ma-svc p, .ma-svc .elementor-widget-text-editor p { font-size: .91rem; color: var(--paper-dim); line-height: 1.75; } /* ---- Category badge ---- */ .ma-cat { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--oxblood-bright); display: block; } /* ---- Post / loop card ---- */ .ma-card h4, .ma-card .elementor-heading-title { font-family: var(--display) !important; font-weight: 400; font-size: 1.38rem; line-height: 1.2; transition: color .3s; color: var(--paper) !important; } .ma-card:hover h4, .ma-card:hover .elementor-heading-title { color: var(--gold) !important; } .ma-card .dt { font-size: .74rem; color: var(--paper-dim); } /* ---- Footer link columns ---- */ .fcx a { display: block; color: var(--paper); opacity: .75; text-decoration: none; font-size: .9rem; margin-bottom: 12px; font-family: var(--body); } .fcx a:hover { opacity: 1; color: var(--gold); } /* ===================================================================== 7. SINGLE-POST CONTENT TYPOGRAPHY Add class ma-post-body to Elementor's "Post Content" widget (Advanced > CSS Classes). Every post then renders on-brand automatically — no per-post work required. ===================================================================== */ .ma-post-body { font-size: 1.05rem; line-height: 1.9; color: #d5cabd; } .ma-post-body h2 { font-family: var(--display); font-weight: 400; font-size: 2rem; color: var(--paper); margin: 48px 0 20px; line-height: 1.1; } .ma-post-body h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--paper); margin: 36px 0 16px; } .ma-post-body p { margin-bottom: 22px; } .ma-post-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .ma-post-body strong { color: var(--paper); font-weight: 500; } .ma-post-body blockquote { border-left: 2px solid var(--gold); padding: 18px 28px; margin: 36px 0; font-family: var(--display); font-style: italic; font-size: 1.4rem; color: var(--paper); line-height: 1.3; background: rgba(184,155,110,.04); } .ma-post-body ul { margin: 0 0 22px 0; padding-left: 0; list-style: none; } .ma-post-body ul li { padding: 6px 0 6px 20px; position: relative; color: #c9beb0; } .ma-post-body ul li::before { content: "—"; position: absolute; left: 0; color: var(--gold); } /* ===================================================================== 8. JOURNAL / POSTS WIDGET STYLING (class: ma-journal) Add ma-journal to the Elementor Posts widget CSS Classes so blog listing cards render in the editorial style automatically. ===================================================================== */ .ma-journal .elementor-post__title a { font-family: var(--display) !important; font-weight: 400; font-size: 1.4rem; line-height: 1.2; color: var(--paper) !important; transition: color .3s; } .ma-journal .elementor-post__title a:hover { color: var(--gold) !important; } .ma-journal .elementor-post__meta-data { font-size: .74rem; color: var(--paper-dim) !important; letter-spacing: .05em; } .ma-journal .elementor-post__excerpt p { font-size: .92rem; color: var(--paper-dim) !important; line-height: 1.75; } .ma-journal .elementor-post__read-more { color: var(--gold) !important; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; font-family: var(--body); text-decoration: none; } .ma-journal .elementor-post__read-more:hover { color: var(--paper) !important; } .ma-journal .elementor-post__thumbnail { border: 1px solid var(--line); margin-bottom: 18px; } .ma-journal article.elementor-post { background: transparent !important; border: none !important; padding: 0 !important; } .ma-journal .elementor-post__text, .ma-journal .elementor-post__card { padding: 0; background: transparent; } /* ===================================================================== 9. MARQUEE Use an Elementor HTML widget with this markup:
BondageChastity ...
===================================================================== */ .ma-marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 19px 0; overflow: hidden; white-space: nowrap; } .ma-marquee-track { display: inline-flex; gap: 56px; animation: ma-slide 32s linear infinite; } .ma-marquee span { font-family: var(--display); font-style: italic; font-size: 1.35rem; color: var(--paper-dim); } .ma-marquee span::after { content: "·"; margin-left: 56px; color: var(--gold); } @keyframes ma-slide { to { transform: translateX(-50%); } } /* ===================================================================== 10. SCROLL REVEAL Add ma-reveal to any Elementor container/widget. JS adds .in when the element scrolls into view. Elementor's own Motion Effects also work — this is an alternative for manual control. ===================================================================== */ .ma-reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } .ma-reveal.in { opacity: 1; transform: none; } /* ===================================================================== 11. 18+ AGE GATE (markup injected via functions.php > wp_footer) ===================================================================== */ #ma-gate { position: fixed; inset: 0; z-index: 99999; background: rgba(8,6,7,.97); display: flex; align-items: center; justify-content: center; text-align: center; backdrop-filter: blur(6px); transition: opacity .8s, visibility .8s; } #ma-gate.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .ma-gate-card { max-width: 460px; padding: 0 32px; } .ma-gate-mark { font-family: var(--display); font-size: 2.6rem; font-style: italic; color: var(--paper); margin-bottom: 6px; } .ma-gate-card .ma-lbl { display: block; margin-bottom: 26px; } .ma-gate-card p { font-size: .9rem; color: var(--paper-dim); margin-bottom: 32px; line-height: 1.85; } .ma-gate-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ===================================================================== 12. RESPONSIVE ===================================================================== */ @media (max-width: 1024px) { .ma-svc { padding: 38px 28px; } } @media (max-width: 640px) { .ma-svc { padding: 34px 22px; } .ma-gate-card { padding: 0 20px; } .ma-gate-mark { font-size: 2rem; } }