.elementor-kit-4{--e-global-color-primary:#1E3020;--e-global-color-secondary:#F7F4ED;--e-global-color-text:#2A2A2A;--e-global-color-accent:#B08D57;--e-global-typography-primary-font-family:"DM Sans";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"DM Sans";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Source Serif 4";--e-global-typography-accent-font-weight:400;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ================================================================== ARTEMEDI — SHARED DESIGN SYSTEM Elementor -> Site Settings -> Custom CSS WHAT THIS IS Every rule that more than one section or more than one page needs: brand tokens, global resets, the type scale, all button variants, layout primitives, the Roman-numeral markers and the gold-metal device. WHY IT LIVES HERE The homepage is being split into one Elementor widget per section. If these rules stayed inside a widget they would have to be duplicated into every one of them — nine copies of the same ~900 lines, nine places to edit, and rules fighting each other in the cascade. Loaded once site-wide, every future page (About, Membership, Artists, Journal, Events) inherits the design system for free. RULES OF THE ROAD - Section-specific CSS does NOT belong here. It stays with the widget that owns that section. - The palette is nine brand colours plus six sanctioned component-level extensions, all documented in :root below. Do not introduce a tenth base colour without updating the brand palette document. - Gold ramps invert by ground: dark-weighted on light surfaces, light-weighted on dark. This is contrast-driven, not decorative. Antique Gold measures 2.81:1 on Warm Ivory and fails WCAG; Deep Gold measures 4.92:1 and passes. DEPENDENCY .artemedi-header__brand rules below drive the header logo's scroll reveal. They activate only when the observer script in the homepage widget adds .has-logo-hero to , so they are inert on pages without a large logo. ================================================================== */ /* ============================================================ DESIGN TOKENS — ARTEMEDI Brand Color Palette v2.0 ============================================================ */ :root { --forest-green: #1E3020; --antique-gold: #B08D57; --warm-ivory: #F7F4ED; --charcoal: #2A2A2A; --olive-green: #4A6742; --soft-linen: #ECE7DE; --warm-stone: #D7D1C7; --muted-sage: #7E8F74; --logo-green: #162115; --font-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-editorial: "Source Serif 4", Georgia, "Times New Roman", serif; --section-pad-y: clamp(80px, 10vw, 160px); --gutter: clamp(24px, 6vw, 96px); --hairline: 1px solid var(--warm-stone); --ease: cubic-bezier(.22,.61,.36,1); --dur: 240ms; /* ---- SANCTIONED PALETTE EXTENSIONS — component level ---- None of these are new drift: all six were already sanctioned in the header widget's CTA. They are collected here so the primary button and the gold "metal" device can be tuned from one place. Do NOT use any of them as flat fills for body copy. Deep gold. Antique Gold alone measures 2.81:1 against Warm Ivory, which fails WCAG AA; grading into this stop lifts a gold fill to a 3.75:1 mean and passes AA-large. 4.92:1 solid. Same value as --am-gold-dark in the header widget. */ --gold-deep: #84652F; /* Light gold. Required because the contrast relationship INVERTS on dark grounds: on Forest Green, Deep Gold falls to 2.59:1 and fails, while this reaches 7.21:1. Same value as --am-gold-light in the header widget. */ --gold-light: #D2B77C; /* Primary-button bevel stops, ported verbatim from the header CTA so the two are visually identical. */ --btn-top: #263D29; --btn-bottom: #172719; --btn-hi-1: #F0D999; --btn-hi-2: #E0C47F; /* ---- The gold "metal" device ------------------------------- One definition per background family, used by the Roman numerals and the lockup tagline. Weighted dark on light grounds, light on dark grounds — which is also how real metal behaves, reflecting its surroundings. */ --gold-metal-on-light: linear-gradient(180deg, var(--antique-gold) 0%, var(--gold-deep) 100%); --gold-metal-on-dark: linear-gradient(180deg, var(--gold-light) 0%, var(--antique-gold) 100%); /* ---- The gold "edge" device --------------------------------- A 115deg multi-stop ramp used for metallic borders. Distinct from --gold-metal-*, which are vertical two-stop ramps for filled TEXT; an edge needs the diagonal and the extra stops to read as struck metal in the 1px it has to work with. Weighted dark on light grounds so the border clears the 3:1 WCAG non-text threshold: Deep Gold measures 4.92:1 on Warm Ivory and 4.39:1 on Soft Linen. The -on-dark variant inverts for the same reason the numerals do. */ --gold-edge: linear-gradient(115deg, var(--gold-deep) 0%, var(--gold-light) 30%, var(--antique-gold) 55%, var(--gold-deep) 100%); --gold-edge-hover: linear-gradient(115deg, var(--antique-gold) 0%, var(--btn-hi-1) 30%, var(--gold-light) 55%, var(--antique-gold) 100%); --gold-edge-on-dark: linear-gradient(115deg, var(--antique-gold) 0%, var(--btn-hi-1) 30%, var(--gold-light) 55%, var(--antique-gold) 100%); /* Brand wordmark asset — referenced by both the and the shine mask. If this file changes, update BOTH the src attribute in the markup below and this variable. The wordmark carries NO baked tagline: the tagline is live text (.logo-hero-tagline) so it can be translated, selected, read by screen readers, and scaled independently. */ --brand-logo: url("https://artemedi.art/wp-content/uploads/2026/07/ArteMedi_wordmark_no_tag.webp"); } /* ============================================================ RESET NOTE: these are global .elementor-kit-4s. When this file is split into multiple Elementor widgets, this block plus TOKENS, TYPOGRAPHY, BUTTONS and LAYOUT PRIMITIVES must move to Elementor → Site Settings → Custom CSS. Do not duplicate them across widgets. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; font-family: var(--font-ui); font-weight: 400; font-size: 18px; line-height: 1.7; color: var(--charcoal); background: var(--warm-ivory); } img { max-width: 100%; display: block; } a { color: var(--forest-green); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--antique-gold); } button { font: inherit; cursor: pointer; } p { margin: 0; } /* ============================================================ HEADER LOGO SCROLL-REVEAL BEHAVIOR Targets the ARTEMEDI header HTML widget's brand link (.artemedi-header__brand). While any large logo is on screen, the header's logo fades out — nav and CTA stay visible. Once scrolled past, it fades back in. Body classes are toggled by the observer at the bottom of : .has-logo-hero — page contains a large logo .past-logo-hero — user has scrolled past all of them opacity is used rather than display:none so the header grid column keeps its width and the layout never shifts. will-change promotes the element to its own compositing layer so the fade stays smooth during heavy scroll repaints. ============================================================ */ .artemedi-header__brand { transition: opacity 400ms cubic-bezier(.22,.61,.36,1); will-change: opacity; } body.has-logo-hero .artemedi-header__brand { opacity: 0; pointer-events: none; } body.has-logo-hero.past-logo-hero .artemedi-header__brand { opacity: 1; pointer-events: auto; } /* ============================================================ TYPOGRAPHY ============================================================ */ .h1 { font-family: var(--font-ui); font-weight: 700; font-size: clamp(44px, 6vw, 68px); line-height: 1.05; letter-spacing: -0.02em; color: var(--forest-green); margin: 0; } .h2 { font-family: var(--font-ui); font-weight: 700; font-size: clamp(34px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.015em; color: var(--forest-green); margin: 0; } .h2 em { font-family: var(--font-editorial); font-style: italic; font-weight: 400; color: var(--olive-green); } .h3 { font-family: var(--font-ui); font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -0.01em; color: var(--forest-green); margin: 0; } .kicker { font-family: var(--font-editorial); font-style: italic; font-size: clamp(18px, 1.6vw, 22px); color: var(--muted-sage); letter-spacing: 0.005em; } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; font-family: var(--font-ui); font-weight: 500; font-size: 15px; letter-spacing: 0.04em; border-radius: 4px; border: 1px solid transparent; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } /* ---- PRIMARY BUTTON — standardised metallic bevel ------------- Ported verbatim from the header CTA so every instance of the "Request Membership" action looks identical: header, hero, membership section, form submit. Four buttons, one action, one treatment. Deliberately NOT applied to secondary or ghost buttons. The bevel's job is hierarchy — it marks the conversion target. On all nine buttons it would mark nothing, and would blow the brand guide's 2% gold budget besides. The label needs no wrapper: `isolation: isolate` makes this a stacking context, so in-flow text paints above the negative z-index pseudo-elements. ------------------------------------------------------------ */ .btn-primary { position: relative; isolation: isolate; overflow: hidden; color: var(--warm-ivory); background: linear-gradient( 180deg, var(--btn-top) 0%, var(--forest-green) 45%, var(--btn-bottom) 100% ); border: 1px solid var(--antique-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 1px 2px rgba(22, 33, 21, 0.10); transition: color 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease); } /* Metallic perimeter — brightens to full opacity on hover. */ .btn-primary::before { content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: inherit; background: linear-gradient( 115deg, var(--gold-deep) 0%, var(--gold-light) 18%, var(--btn-hi-1) 34%, var(--antique-gold) 50%, var(--btn-hi-2) 66%, var(--gold-deep) 100% ); opacity: 0.78; transition: opacity 200ms var(--ease); } /* Inner fill, inset by 1px so the gold perimeter stays visible. */ .btn-primary::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: 3px; background: linear-gradient( 180deg, var(--btn-top) 0%, var(--forest-green) 47%, var(--btn-bottom) 100% ); } .btn-primary:hover, .btn-primary:focus-visible { color: var(--warm-ivory); border-color: var(--gold-light); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 4px 10px rgba(22, 33, 21, 0.13); transform: translateY(-1px); } .btn-primary:hover::before, .btn-primary:focus-visible::before { opacity: 1; } /* ---- Secondary button: metallic hairline --------------------- The border is a 1px gradient ring; the fill stays genuinely transparent. TECHNIQUE. A gradient cannot be painted into `border-color`. The usual workaround layers a padding-box fill under a border-box gradient — but that requires the fill to match whatever is behind the button, so it silently breaks the moment a button moves to a different ground. Instead a pseudo-element is masked with `mask-composite` to leave only its 1px rim, which is ground-agnostic and works anywhere. FALLBACK. Wrapped in @supports; engines without mask-composite get a solid Deep Gold border, which still clears the 3:1 non-text threshold at 4.92:1 on ivory and 4.39:1 on linen. CROSSFADE. background-image is not animatable between gradients, so a single element would snap on hover. Two stacked rims cross-fade on opacity instead — the point of the device is metal catching light, and a hard cut reads cheap. LABEL. Stays Forest Green. The previous hover turned it Antique Gold, which measures 2.51:1 on Soft Linen and failed WCAG outright. Deep Gold is the darkest sanctioned gold and still only reaches 4.39:1 there, under the 4.5 needed for a 15px label — so gold carries the border, never the text. ------------------------------------------------------------ */ .btn-secondary { color: var(--forest-green); border: 1px solid var(--gold-deep); background-color: transparent; background-clip: padding-box; } .btn-secondary:hover, .btn-secondary:focus-visible { color: var(--forest-green); background-color: rgba(176, 141, 87, 0.07); transform: translateY(-1px); } @supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) { .btn-secondary { position: relative; isolation: isolate; border-color: transparent; } .btn-secondary::before, .btn-secondary::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .btn-secondary::before { background: var(--gold-edge); } .btn-secondary::after { background: var(--gold-edge-hover); opacity: 0; transition: opacity 260ms var(--ease); } .btn-secondary:hover::after, .btn-secondary:focus-visible::after { opacity: 1; } /* Dark grounds invert the ramp, same rule as the numerals. No secondary button sits on a forest section today; this is here so future pages inherit the behaviour correctly. */ .section--forest .btn-secondary { color: var(--warm-ivory); } .section--forest .btn-secondary::before { background: var(--gold-edge-on-dark); } .section--forest .btn-secondary:hover, .section--forest .btn-secondary:focus-visible { color: var(--warm-ivory); background-color: rgba(210, 183, 124, 0.10); } } /* ---- Ghost button: metallic rule ------------------------------ No box — the label sits over a 2px gold rule. Used where a ghost stands beside a primary (hero, membership), so the pair reads as one filled plate plus one quiet editorial link rather than two competing boxes. HARMONY. The rule reuses --gold-edge, the exact token the secondary button's border uses, so the two golds are the same ramp by construction rather than by eye. No separate value to drift. THICKNESS. 2px, not 1px. A rule needs the extra pixel for the specular ramp to be visible at all; the guide's "avoid thick outlines" note is about box borders, and a 2px underline is a standard editorial device. The ramp is dark-weighted, so it gains presence without out-shining the primary beside it. Rendered as pseudo-elements rather than border-image: it cross-fades on hover the same way the secondary ring does, and border-image cannot animate between gradients. LABEL. Stays Forest Green. The old hover turned it Antique Gold at 2.81:1 on ivory and 2.51:1 on linen — both failing. ------------------------------------------------------------ */ .btn-ghost { position: relative; padding: 0 0 7px; color: var(--forest-green); border: 0; border-radius: 0; background: transparent; } .btn-ghost::before, .btn-ghost::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; } .btn-ghost::before { background: var(--gold-edge); } .btn-ghost::after { background: var(--gold-edge-hover); opacity: 0; transition: opacity 260ms var(--ease); } .btn-ghost:hover, .btn-ghost:focus-visible { color: var(--forest-green); } .btn-ghost:hover::after, .btn-ghost:focus-visible::after { opacity: 1; } /* ---- Primary button on dark green: struck gold --------------- The rule is contrast, not taste: a button takes the opposite value of its ground, so gold appears only where it can be seen. Measured against each surface — gold on Warm Ivory 2.81:1 invisible gold on Soft Linen 2.51:1 invisible gold on Forest Green 4.53:1 separates which is why light sections keep the dark fill with a gold perimeter, and dark sections get the gold fill outright. WHAT MAKES IT READ AS METAL RATHER THAN YELLOW: 1. Sharp specular, not a smooth ramp. Real metal jumps from highlight to body over a short distance — hence the tight 0-10% band up top rather than an even gradient. 2. A core shadow before the bottom edge (93%), then reflected bounce light at the very edge (100%). That inversion at the last few pixels is the strongest single cue. 3. Movement. Metal changes as you shift relative to it, so the fill carries a specular sweep parked off-frame that crosses on hover. A static gradient always reads as paint. Label legibility was tuned against the gradient: Forest Green holds 5.71:1 at the worst point inside the vertical band where the type sits. 15px medium is not "large text" under WCAG, so the 4.5:1 threshold applies and the core shadow is pushed below the type rather than through it. ------------------------------------------------------------ */ .section--forest .btn-primary { color: var(--forest-green); border-color: var(--gold-deep); background: var(--antique-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(70, 50, 18, 0.35), 0 2px 6px rgba(0, 0, 0, 0.28); } /* Deep-gold rim in the 1px ring inside the border — gives the edge definition the ivory version was missing. */ .section--forest .btn-primary::before { background: var(--gold-deep); opacity: 1; } .section--forest .btn-primary::after { background: /* specular sweep — parked off-frame right until hover */ linear-gradient( 115deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58% ) no-repeat, /* the metal itself */ linear-gradient( 180deg, var(--antique-gold) 0%, var(--btn-hi-1) 10%, var(--btn-hi-2) 42%, var(--antique-gold) 78%, var(--gold-deep) 93%, var(--gold-light) 100% ); background-size: 260% 100%, 100% 100%; background-position: 165% 0, 0 0; transition: background-position 760ms var(--ease); } .section--forest .btn-primary:hover::after, .section--forest .btn-primary:focus-visible::after { background-position: -65% 0, 0 0; } .section--forest .btn-primary:hover, .section--forest .btn-primary:focus-visible { color: var(--forest-green); border-color: var(--gold-light); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(70, 50, 18, 0.40), 0 5px 14px rgba(0, 0, 0, 0.32); transform: translateY(-1px); } /* Dark grounds invert the ramp, same rule as the numerals and the secondary ring. No ghost button sits on a forest section today; this keeps future pages correct. */ .section--forest .btn-ghost { color: var(--warm-ivory); } .section--forest .btn-ghost::before { background: var(--gold-edge-on-dark); } .section--forest .btn-ghost:hover, .section--forest .btn-ghost:focus-visible { color: var(--warm-ivory); } /* ============================================================ LAYOUT PRIMITIVES ============================================================ */ .container { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section { padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y); } .section--linen { background: var(--soft-linen); } /* ---- Dark sections: raking gallery light ---------------------- An off-centre radial with the light source placed just above the top edge, so the glow enters the frame rather than sitting inside it. 1. Direction. Above-left, matching the logo shine sweep (115deg) and the hero artwork plate (highlight at 30% 20%). One lighting logic across three surfaces rather than three unrelated effects. 2. Span. Olive Green at the light core, through Forest Green, out to Logo Green at the far edge. The earlier Forest -> Logo span was too tight to read as anything. 3. Banding — note the counterintuitive part. A SMALL luminance delta over a tall section is what causes visible banding: Forest -> Logo offers only 15 discrete 8-bit steps across ~800px, giving 53px bands. Olive -> Logo offers 70 steps, giving 11px bands. Widening the span both strengthens the effect and removes the banding. 4. Contrast holds across the whole surface. Ivory body text ranges 8.3:1 (brightest corner) to 15.1:1 (far edge). Gold form labels sit in the 4.6-5.2:1 band. The olive core is confined to the upper-left, away from the form column. ------------------------------------------------------------ */ .section--forest { background: radial-gradient( 130% 100% at 18% -12%, var(--olive-green) 0%, var(--forest-green) 38%, var(--logo-green) 88% ), var(--logo-green); color: var(--warm-ivory); } .section--forest .h1, .section--forest .h2, .section--forest .h3 { color: var(--warm-ivory); } .section--forest .kicker { color: var(--antique-gold); } /* Roman numeral section markers — brand signature device */ .section-marker { display: flex; align-items: center; gap: 24px; margin-bottom: 48px; } /* Roman numeral section markers — brand signature device. Source Serif 4 italic SEMIBOLD (600) at 28px, up from regular at 22px. Two reasons: heavier strokes expose more gold area, and a two-stop gradient across a thin italic stroke is imperceptible — the weight is what lets the metal read at all. The fill is a CSS gradient on live text, not a raster. A gold texture at this size would be invisible as texture, would need nine assets plus retina variants, would break whenever a section is inserted or reordered, and would drop the numeral out of the accessibility tree. min-width holds the gold rule at a consistent x-position across all nine markers; "VIII" is widest and simply grows past the floor. */ .section-marker .numeral { font-family: var(--font-editorial); font-style: italic; font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: 0.04em; min-width: 48px; /* Fallback fill. Solid Deep Gold measures 4.92:1 on Warm Ivory and 4.39:1 on Soft Linen — both pass WCAG AA. */ color: var(--gold-deep); } .section-marker .rule { flex: 0 0 96px; height: 1px; background: var(--antique-gold); opacity: 0.5; } .section-marker .label { font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-sage); } .section--forest .section-marker .label { color: var(--antique-gold); opacity: 0.85; } /* ---- Gold metal fill, applied to every Roman numeral --------- Three numeral families share this device: .section-marker .numeral — I to IX, the section markers .philosophy .num — i/ii/iii, on Forest Green .pillar .num — i to iv, on Soft Linen Variants are driven by contrast, not taste. Measured against each ground: Gold Light Antique Deep Gold Warm Ivory 1.77 2.81 4.92 Soft Linen 1.58 2.51 4.39 Forest Green 7.21 4.53 2.59 So light grounds need the dark ramp and dark grounds need the light one. This also repairs two live WCAG failures: the markers and .pillar .num were both flat Antique Gold at 2.81:1 and 2.51:1 respectively. ------------------------------------------------------------ */ .pillar .num { /* fallback — Soft Linen ground */ color: var(--gold-deep); } .philosophy .num, .section--forest .section-marker .numeral { /* fallback — dark green ground; Antique Gold is 4.53:1 here */ color: var(--antique-gold); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .section-marker .numeral, .pillar .num { background: var(--gold-metal-on-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .section--forest .section-marker .numeral, .philosophy .num { background: var(--gold-metal-on-dark); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } /* ============================================================ FEATURED ARTISTS & WORKS ============================================================ */ .section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 64px; gap: 40px; flex-wrap: wrap; } .section-header .lead { max-width: 620px; } .section-header .lead .pair { font-family: var(--font-editorial); font-style: italic; font-size: clamp(19px, 1.7vw, 22px); color: var(--muted-sage); margin: 20px 0 0; line-height: 1.45; } .section-header .lead .pair + .pair { margin-top: 6px; } .section-header .lead .sub { font-size: 16px; line-height: 1.6; color: var(--charcoal); margin: 24px 0 0; max-width: 520px; } .philosophy .num { font-family: var(--font-editorial); font-style: italic; font-size: 20px; color: var(--antique-gold); margin-bottom: 16px; } .pillar .num { font-family: var(--font-editorial); font-style: italic; font-size: 18px; color: var(--antique-gold); margin-bottom: 12px; } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ========================================================= ARTEMEDI — TERMS & PRIVACY MODAL STYLING ========================================================= */ .artemedi-modal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 240ms cubic-bezier(.22, .61, .36, 1), visibility 240ms linear; } .artemedi-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .artemedi-modal__overlay { position: absolute; inset: 0; background: rgba(16, 32, 18, 0.88); /* Deep brand forest backing */ backdrop-filter: blur(4px); } .artemedi-modal__dialog { position: relative; z-index: 2; width: min(100% - 40px, 720px); max-height: 82vh; background: #F7F4ED; /* Warm Ivory */ border: 1px solid #B08D57; /* Antique Gold perimeter */ border-radius: 4px; box-shadow: 0 16px 40px rgba(16, 32, 18, 0.4); padding: clamp(32px, 5vw, 56px); display: flex; flex-direction: column; } .artemedi-modal__close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid #D7D1C7; border-radius: 4px; color: #1E3020; cursor: pointer; transition: border-color 180ms ease, color 180ms ease; } .artemedi-modal__close:hover { border-color: #84652F; color: #84652F; } .artemedi-modal__header { margin-bottom: 24px; flex-shrink: 0; } .artemedi-modal__marker { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .artemedi-modal__rule { width: 32px; height: 1px; background: #B08D57; } .artemedi-modal__label { font-family: "DM Sans", Arial, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #84652F; } .artemedi-modal__title { font-family: "DM Sans", Arial, sans-serif; font-weight: 700; font-size: clamp(24px, 2.5vw, 32px); color: #1E3020; margin: 0; letter-spacing: -0.01em; } .artemedi-modal__content { overflow-y: auto; padding-right: 12px; color: #2A2A2A; } .artemedi-modal__section { margin-bottom: 24px; } .artemedi-modal__section:last-child { margin-bottom: 0; } .artemedi-modal__section h3 { font-family: "DM Sans", Arial, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: #1E3020; margin: 0 0 8px 0; } .artemedi-modal__section p { font-family: "DM Sans", Arial, sans-serif; font-size: 14px; line-height: 1.65; color: #2A2A2A; margin: 0 0 10px 0; } .artemedi-modal__section p:last-child { margin-bottom: 0; } .artemedi-modal__section a { color: #84652F; text-decoration: underline; text-underline-offset: 2px; } /* ============================================================ ARTEMEDI — SECTION V REQUEST MEMBERSHIP FORM Scoped overrides for the Elementor Pro Form widget in the Section V native Elementor container. Dark forest ground. Antique-gold uppercase labels, transparent inputs with 1px ivory-alpha bottom border, warm-ivory text, antique-gold focus underline. Custom-styled dropdowns match the text-input underline treatment. The submit button is NOT styled here. It inherits from the site-wide .btn + .btn-primary + .section--forest .btn-primary cascade — add classes "btn btn-primary" to the Elementor form's submit button (CSS Classes field in the widget's Submit panel). This ensures the form's CTA is visually identical to every other primary button on the site, without duplication. Elementor Pro emits its form fields with high-specificity defaults from the plugin stylesheet; !important is used throughout to defeat those defaults reliably. ============================================================ */ /* ---- Field-group rhythm ------------------------------------ */ .artemedi-request-form .elementor-field-group { margin-bottom: 24px; } .artemedi-request-form .elementor-form { display: grid; gap: 0; } .artemedi-request-form .elementor-form .elementor-form-fields-wrapper { gap: 0; row-gap: 0; } /* ---- Labels ------------------------------------------------- */ .artemedi-request-form .elementor-field-label { display: block; font-family: "DM Sans", Arial, sans-serif; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: #B08D57 !important; /* Antique Gold */ margin-bottom: 10px !important; padding-bottom: 0 !important; } .artemedi-request-form .elementor-field-label .elementor-mark-required { color: #B08D57 !important; margin-left: 4px; } /* ---- Text, email, tel, textarea ---------------------------- */ .artemedi-request-form .elementor-field-textual, .artemedi-request-form input[type="text"], .artemedi-request-form input[type="email"], .artemedi-request-form input[type="tel"], .artemedi-request-form textarea { background: transparent !important; border: none !important; border-bottom: 1px solid rgba(247, 244, 237, 0.4) !important; border-radius: 0 !important; color: #F7F4ED !important; /* Warm Ivory */ font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; padding: 10px 0 !important; box-shadow: none !important; min-height: auto !important; transition: border-color 220ms cubic-bezier(.22, .61, .36, 1); } .artemedi-request-form .elementor-field-textual::placeholder, .artemedi-request-form input::placeholder, .artemedi-request-form textarea::placeholder { color: rgba(247, 244, 237, 0.35) !important; } .artemedi-request-form .elementor-field-textual:focus, .artemedi-request-form input:focus, .artemedi-request-form textarea:focus { outline: none !important; border-bottom-color: #B08D57 !important; /* Antique Gold */ box-shadow: none !important; } .artemedi-request-form textarea { min-height: 80px !important; resize: vertical; font-family: "DM Sans", Arial, sans-serif !important; } /* ---- Select (dropdowns) ------------------------------------ Elementor's default select ships with OS chrome. Strip it, add a custom antique-gold caret painted as inline SVG, and match the underline treatment used by text inputs. The dropdown option panel remains browser-native (OS-controlled); most modern engines respect the option { background } rule below, older ones ignore it. Acceptable — the trigger is what carries the design. */ .artemedi-request-form select, .artemedi-request-form .elementor-field-type-select select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background: transparent !important; border: none !important; border-bottom: 1px solid rgba(247, 244, 237, 0.4) !important; border-radius: 0 !important; color: #F7F4ED !important; /* Warm Ivory */ font-family: "DM Sans", Arial, sans-serif !important; font-size: 16px !important; padding: 10px 24px 10px 0 !important; box-shadow: none !important; min-height: auto !important; cursor: pointer; /* Antique-gold caret, SVG inline so no HTTP request */ background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 4px center !important; background-size: 12px 7px !important; transition: border-color 220ms cubic-bezier(.22, .61, .36, 1); } .artemedi-request-form select:focus, .artemedi-request-form .elementor-field-type-select select:focus { outline: none !important; border-bottom-color: #B08D57 !important; box-shadow: none !important; } /* Placeholder option (first empty option) shows dimmer */ .artemedi-request-form select:invalid, .artemedi-request-form select option[value=""] { color: rgba(247, 244, 237, 0.35); } /* Native option panel — where browser cooperates */ .artemedi-request-form select option { background: #1E3020; /* Forest Green */ color: #F7F4ED; /* Warm Ivory */ padding: 8px 12px; } /* ---- Two-column form rows ---------------------------------- Elementor handles column widths via the .elementor-field-group width classes (elementor-col-50, elementor-col-100). Confirm in the widget's per-field settings that Email/Phone/Specialty/ City use 50% column width; First Name/Last Name use 50%; the interest dropdown, textarea, consent, and submit use 100%. The mobile stacking below forces all fields to full width. */ @media (max-width: 900px) { .artemedi-request-form .elementor-field-group { width: 100% !important; } } /* ---- Consent (Acceptance field) ---------------------------- */ .artemedi-request-form .elementor-field-type-acceptance .elementor-field-subgroup { display: flex; gap: 12px; align-items: flex-start; } .artemedi-request-form .elementor-field-type-acceptance label { font-family: "DM Sans", Arial, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: rgba(247, 244, 237, 0.7) !important; line-height: 1.5 !important; } .artemedi-request-form input[type="checkbox"] { accent-color: #B08D57 !important; /* Antique Gold */ margin-top: 4px !important; margin-right: 8px !important; } /* ---- Submit button — struck gold fill (dark-ground primary) Reproduces the .section--forest .btn-primary treatment scoped to the form so Elementor's own .elementor-button styling can't compete. Pseudo-element layering matches the site-wide rule: ::before → deep-gold perimeter (1px inside outer edge) ::after → the metal fill + parked specular sweep text → sits above via isolation stacking context ============================================================ */ .artemedi-request-form .elementor-button { position: relative; isolation: isolate; overflow: hidden; display: inline-flex !important; align-items: center; justify-content: center; min-height: 52px; padding: 16px 36px !important; color: #1E3020 !important; /* Forest Green label */ background: #B08D57 !important; /* Antique Gold base */ border: 1px solid #84652F !important; /* Deep Gold rim */ border-radius: 4px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(70, 50, 18, 0.35), 0 2px 6px rgba(0, 0, 0, 0.28) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); font-family: "DM Sans", Arial, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0.04em !important; line-height: 1 !important; cursor: pointer; transition: color 200ms cubic-bezier(.22, .61, .36, 1), border-color 200ms cubic-bezier(.22, .61, .36, 1), box-shadow 200ms cubic-bezier(.22, .61, .36, 1), transform 200ms cubic-bezier(.22, .61, .36, 1); } /* Deep-gold rim (inside the border) — gives the edge definition */ .artemedi-request-form .elementor-button::before { content: ""; position: absolute; inset: -1px; z-index: -2; border-radius: inherit; background: #84652F; opacity: 1; } /* Metal fill + parked specular sweep. Sweep travels 165% → -65% on hover (760ms). Same pattern the site-wide rule uses. */ .artemedi-request-form .elementor-button::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: 3px; background: linear-gradient( 115deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58% ) no-repeat, linear-gradient( 180deg, #B08D57 0%, #F0D999 10%, #E0C47F 42%, #B08D57 78%, #84652F 93%, #D2B77C 100% ); background-size: 260% 100%, 100% 100%; background-position: 165% 0, 0 0; transition: background-position 760ms cubic-bezier(.22, .61, .36, 1); } .artemedi-request-form .elementor-button:hover, .artemedi-request-form .elementor-button:focus-visible { color: #1E3020 !important; border-color: #D2B77C !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(70, 50, 18, 0.40), 0 5px 14px rgba(0, 0, 0, 0.32) !important; transform: translateY(-1px); outline: none; } .artemedi-request-form .elementor-button:hover::after, .artemedi-request-form .elementor-button:focus-visible::after { background-position: -65% 0, 0 0; } /* ---- Success / error messages ------------------------------ */ .artemedi-request-form .elementor-message-success { font-family: "Source Serif 4", Georgia, serif !important; font-style: italic; font-size: 19px !important; line-height: 1.5 !important; color: #F7F4ED !important; /* Warm Ivory */ background: transparent !important; border: none !important; padding: 24px 0 !important; margin-top: 16px !important; } .artemedi-request-form .elementor-message-danger, .artemedi-request-form .elementor-message.elementor-message-danger { font-family: "DM Sans", Arial, sans-serif !important; font-size: 13px !important; color: #FFB4B4 !important; background: transparent !important; border: none !important; padding: 8px 0 !important; margin-top: 12px !important; }/* End custom CSS */