/* ========================================================================= EAU CLAIRE MEDICAL CLINIC - eau-essentials.css Design system : "CLEAR WATER" --------------------------------------------------------------------------- Concept : deep clear water at night over healing stone. Verdant apothecary meets still water. Calm, dignified, expensive, human. Built around the clinic name (Eau Claire = clear water) and its own language of transparency, listening and clarity. Palette : spruce / petrol INK base + sea-glass JADE (healing) + champagne GOLD (legacy, 40 years, dignity) + warm IVORY. Type : Fraunces (optical serif display) + Hanken Grotesk (body/UI). Notes : dark-only. ASCII-only comments. Namespaced .eau-* components on top of sensible global element styling. Mobile-first safe. ========================================================================= */ /* Fonts are loaded in the page (Google Fonts) - no @import here. */ /* ========================================================================= 1. TOKENS ========================================================================= */ :root { color-scheme: dark; /* ---- Fonts ---- */ --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif; --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, "Cascadia Code", Menlo, monospace; /* ---- Surfaces : spruce / petrol ink (warm-cool, never blue-navy) ---- */ --ink-950: #060A0B; --ink-900: #091012; /* PAGE base */ --ink-850: #0B1417; --ink-800: #0E191C; /* section alt */ --ink-700: #122326; /* card / panel */ --ink-650: #152A2E; --ink-600: #19322F; /* elevated / hover */ --ink-550: #1F3D43; --ink-500: #264951; /* input field */ --ink-450: #2F5860; --ink-400: #3A6973; /* ---- Lines / borders (cool, faint teal) ---- */ --line: rgba(180, 226, 215, 0.075); --line-2: rgba(180, 226, 215, 0.135); --line-3: rgba(180, 226, 215, 0.225); --line-jade: rgba(99, 199, 170, 0.34); --line-gold: rgba(199, 166, 104, 0.34); /* ---- Jade : sea-glass healing green (muted, NOT neon) ---- */ --jade-200: #BDEBD9; --jade-300: #97DCC2; --jade-400: #6FC9AC; /* bright accent */ --jade-500: #4FB293; /* CORE */ --jade-600: #3C9279; /* deep */ --jade-700: #2C6F5C; --jade-glow: rgba(79, 178, 147, 0.30); --jade-soft: rgba(79, 178, 147, 0.12); --jade-faint: rgba(79, 178, 147, 0.07); /* ---- Gold : champagne / soft brass (legacy, warmth) ---- */ --gold-200: #F0E0BB; --gold-300: #E4CE9A; --gold-400: #D6BB7E; /* bright */ --gold-500: #C7A668; /* CORE champagne */ --gold-600: #A8884E; /* deep brass */ --gold-glow: rgba(199, 166, 104, 0.28); --gold-soft: rgba(199, 166, 104, 0.12); --gold-faint: rgba(199, 166, 104, 0.07); /* ---- Text : warm ivory -> sage gray ---- */ --text-strong: #F4F2EA; --text: #D7DDD8; --text-soft: #AAB7B2; --text-muted: #7E8E89; --text-faint: #566460; --on-jade: #052019; --on-gold: #241B07; /* ---- Semantic (warm, organic) ---- */ --success: #4FB293; --success-soft: rgba(79, 178, 147, 0.12); --warn: #D6A14E; --warn-soft: rgba(214, 161, 78, 0.13); --danger: #DD7A5E; --danger-bright: #E68E74; --danger-soft: rgba(221, 122, 94, 0.13); --info: #6FB6C6; --info-soft: rgba(111, 182, 198, 0.12); /* ---- Gradients ---- */ --grad-jade: linear-gradient(135deg, #6FC9AC 0%, #3C9279 100%); --grad-jade-hover: linear-gradient(135deg, #7ED3B8 0%, #459C82 100%); --grad-gold: linear-gradient(135deg, #E4CE9A 0%, #A8884E 100%); --grad-gold-hover: linear-gradient(135deg, #EFD9A8 0%, #B7965A 100%); --grad-lux: linear-gradient(120deg, #97DCC2 0%, #4FB293 40%, #C7A668 100%); --grad-text: linear-gradient(118deg, #BDEBD9 0%, #6FC9AC 46%, #E4CE9A 100%); --grad-hairline: linear-gradient(90deg, transparent, var(--jade-500) 38%, var(--gold-500) 64%, transparent); --grad-sheen: linear-gradient(180deg, rgba(189, 235, 217, 0.16), rgba(189, 235, 217, 0) 42%); /* ---- Shadows / glows ---- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55), 0 8px 22px rgba(0, 0, 0, 0.4); --shadow-xl: 0 40px 90px rgba(0, 0, 0, 0.62), 0 14px 32px rgba(0, 0, 0, 0.45); --glow-jade: 0 0 0 1px var(--jade-soft), 0 12px 40px var(--jade-glow); --glow-gold: 0 0 0 1px var(--gold-soft), 0 12px 40px var(--gold-glow); --ring: 0 0 0 3px rgba(79, 178, 147, 0.38); --ring-gold: 0 0 0 3px rgba(199, 166, 104, 0.38); /* ---- Radius ---- */ --r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px; /* ---- Spacing (4px base) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 140ms; --t: 240ms; --t-slow: 420ms; /* ---- Layout ---- */ --container: 1200px; --container-wide: 1320px; --container-narrow: 760px; --pad-x: clamp(20px, 5vw, 48px); /* ---- Z-index ---- */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200; /* ---- Type scale ---- */ --fs-xs: 0.78rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.0625rem; --fs-lg: 1.1875rem; --fs-xl: 1.375rem; } /* ========================================================================= 2. RESET + BASE ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; tab-size: 4; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.65; font-weight: 400; color: var(--text); background-color: var(--ink-900); min-height: 100vh; overflow-x: hidden; position: relative; -webkit-tap-highlight-color: transparent; text-underline-offset: 0.18em; } /* Ambient clear-water atmosphere : drifting jade + gold caustic glows. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(50% 42% at 14% 8%, rgba(79, 178, 147, 0.10), transparent 70%), radial-gradient(46% 40% at 88% 14%, rgba(199, 166, 104, 0.075), transparent 72%), radial-gradient(60% 55% at 78% 96%, rgba(79, 178, 147, 0.06), transparent 75%), radial-gradient(40% 38% at 6% 88%, rgba(111, 182, 198, 0.05), transparent 72%); animation: eau-drift 26s var(--ease) infinite alternate; } /* Faint film grain for a tactile, printed-luxury surface. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.04; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; -webkit-user-drag: none; } svg { fill: none; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } ::selection { background: rgba(79, 178, 147, 0.32); color: var(--text-strong); } * { scrollbar-width: thin; scrollbar-color: var(--jade-600) transparent; } *::-webkit-scrollbar { width: 11px; height: 11px; } *::-webkit-scrollbar-track { background: var(--ink-850); } *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--jade-600), var(--gold-600)); border: 3px solid var(--ink-850); border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--jade-500), var(--gold-500)); } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ========================================================================= 3. TYPOGRAPHY ========================================================================= */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-strong); font-weight: 460; line-height: 1.08; letter-spacing: -0.012em; font-optical-sizing: auto; text-wrap: balance; } h1 { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.3rem); font-weight: 480; letter-spacing: -0.022em; } h2 { font-size: clamp(1.9rem, 1.3rem + 2.7vw, 3rem); letter-spacing: -0.018em; } h3 { font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2rem); } h4 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); } h5 { font-family: var(--font-sans); font-size: var(--fs-lg); font-weight: 600; color: var(--text-strong); line-height: 1.3; letter-spacing: -0.005em; } h6 { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-muted); } p { margin: 0; color: var(--text); max-width: 68ch; } p + p { margin-top: 1em; } strong, b { font-weight: 600; color: var(--text-strong); } em, i { font-style: italic; } small { font-size: var(--fs-sm); color: var(--text-soft); } a { color: var(--jade-400); transition: color var(--t) var(--ease); } a:hover { color: var(--gold-400); } /* Inline content link : animated patina-to-brass underline */ .eau-link { position: relative; color: var(--jade-300); font-weight: 500; background-image: linear-gradient(var(--gold-400), var(--gold-400)); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: color var(--t) var(--ease), background-size var(--t) var(--ease-out); } .eau-link:hover { color: var(--gold-300); background-size: 100% 1.5px; } /* Link with arrow that slides on hover */ .eau-link-arrow { display: inline-flex; align-items: center; gap: 0.4em; color: var(--jade-300); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.01em; transition: color var(--t) var(--ease), gap var(--t) var(--ease); } .eau-link-arrow svg { width: 1.05em; height: 1.05em; stroke: currentColor; stroke-width: 2; transition: transform var(--t) var(--ease); } .eau-link-arrow:hover { color: var(--gold-300); gap: 0.65em; } .eau-link-arrow:hover svg { transform: translateX(2px); } blockquote { position: relative; font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); font-weight: 420; font-style: italic; line-height: 1.4; color: var(--text-strong); padding: var(--sp-2) 0 var(--sp-2) var(--sp-6); border-left: 2px solid transparent; border-image: var(--grad-hairline) 1; max-width: 60ch; } blockquote cite { display: block; margin-top: var(--sp-4); font-family: var(--font-sans); font-style: normal; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-400); } ul.eau-list, ol.eau-list { max-width: 64ch; color: var(--text); } ul.eau-list li, ol.eau-list li { position: relative; padding-left: 1.7em; margin: 0.55em 0; } ul.eau-list li::before { content: ""; position: absolute; left: 0.1em; top: 0.62em; width: 7px; height: 7px; border-radius: 2px; background: var(--grad-jade); transform: rotate(45deg); box-shadow: 0 0 10px var(--jade-glow); } ol.eau-list { counter-reset: eau; } ol.eau-list li { counter-increment: eau; } ol.eau-list li::before { content: counter(eau, decimal-leading-zero); position: absolute; left: 0; top: 0.05em; font-family: var(--font-mono); font-size: 0.74em; font-weight: 600; color: var(--gold-400); letter-spacing: 0.02em; } hr { border: none; height: 1px; background: var(--grad-hairline); margin: var(--sp-8) 0; opacity: 0.7; } code, kbd, samp { font-family: var(--font-mono); font-size: 0.875em; } code { background: var(--jade-faint); color: var(--jade-300); padding: 0.12em 0.45em; border-radius: var(--r-xs); border: 1px solid var(--line); } pre { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-soft); background: var(--ink-850); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--sp-5); overflow-x: auto; } pre code { background: none; border: none; padding: 0; color: inherit; } kbd { background: var(--ink-600); color: var(--text-strong); border: 1px solid var(--line-3); border-bottom-width: 2px; border-radius: var(--r-xs); padding: 0.12em 0.5em; font-size: 0.8em; font-weight: 600; } mark { background: var(--gold-soft); color: var(--gold-200); padding: 0.05em 0.3em; border-radius: 4px; } abbr[title] { text-decoration: underline dotted var(--line-3); cursor: help; } /* ---- Type utilities ---- */ .eau-display { font-family: var(--font-display); font-size: clamp(2.8rem, 1.4rem + 6vw, 5.5rem); font-weight: 480; line-height: 1.0; letter-spacing: -0.028em; color: var(--text-strong); } .eau-lead { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.55; color: var(--text-soft); font-weight: 400; max-width: 60ch; } .eau-grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .eau-serif { font-family: var(--font-display); } .eau-sans { font-family: var(--font-sans); } .eau-mono { font-family: var(--font-mono); } /* Eyebrow / apothecary overline : jade dot + tracked label */ .eau-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-soft); } .eau-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--jade-400); box-shadow: 0 0 0 4px var(--jade-faint), 0 0 12px var(--jade-glow); } .eau-eyebrow--gold { color: var(--gold-300); } .eau-eyebrow--gold::before { background: var(--gold-400); box-shadow: 0 0 0 4px var(--gold-faint), 0 0 12px var(--gold-glow); } /* ========================================================================= 4. LAYOUT HELPERS ========================================================================= */ .eau-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); } .eau-container--wide { max-width: var(--container-wide); } .eau-container--narrow { max-width: var(--container-narrow); } .eau-section { padding-block: clamp(56px, 8vw, 120px); position: relative; } .eau-section--tight { padding-block: clamp(36px, 5vw, 72px); } .eau-stack { display: flex; flex-direction: column; gap: var(--sp-4); } .eau-stack--lg { gap: var(--sp-8); } .eau-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .eau-grid { display: grid; gap: var(--sp-6); } .eau-grid--2 { grid-template-columns: repeat(2, 1fr); } .eau-grid--3 { grid-template-columns: repeat(3, 1fr); } .eau-grid--4 { grid-template-columns: repeat(4, 1fr); } .eau-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* ========================================================================= 5. BUTTONS ========================================================================= */ .eau-btn { --_h: 48px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; height: var(--_h); padding: 0 var(--sp-6); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.012em; line-height: 1; white-space: nowrap; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; user-select: none; overflow: hidden; isolation: isolate; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); } .eau-btn svg { width: 1.15em; height: 1.15em; stroke: currentColor; stroke-width: 1.9; transition: transform var(--t) var(--ease); } .eau-btn:active { transform: translateY(1px) scale(0.992); } .eau-btn:disabled, .eau-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } /* Shimmer sweep for filled variants */ .eau-btn::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-130%); transition: transform var(--t-slow) var(--ease); pointer-events: none; } .eau-btn:hover::after { transform: translateX(130%); } .eau-btn > * { position: relative; z-index: 2; } .eau-btn--primary { background: var(--grad-jade); color: var(--on-jade); box-shadow: var(--glow-jade), inset 0 1px 0 rgba(255,255,255,0.25); } .eau-btn--primary:hover { background: var(--grad-jade-hover); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--jade-soft), 0 18px 44px var(--jade-glow), inset 0 1px 0 rgba(255,255,255,0.3); } .eau-btn--gold { background: var(--grad-gold); color: var(--on-gold); box-shadow: var(--glow-gold), inset 0 1px 0 rgba(255,255,255,0.3); } .eau-btn--gold:hover { background: var(--grad-gold-hover); transform: translateY(-2px); box-shadow: 0 0 0 1px var(--gold-soft), 0 18px 44px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.35); } .eau-btn--ghost { background: rgba(255,255,255,0.012); color: var(--text-strong); border-color: var(--line-3); backdrop-filter: blur(8px); } .eau-btn--ghost::after { display: none; } .eau-btn--ghost:hover { border-color: var(--line-jade); background: var(--jade-faint); color: var(--jade-200); transform: translateY(-2px); } .eau-btn--soft { background: var(--jade-soft); color: var(--jade-200); border-color: var(--line-jade); } .eau-btn--soft::after { display: none; } .eau-btn--soft:hover { background: rgba(79,178,147,0.2); transform: translateY(-2px); } .eau-btn--danger { background: var(--danger-soft); color: var(--danger-bright); border-color: rgba(221,122,94,0.4); } .eau-btn--danger::after { display: none; } .eau-btn--danger:hover { background: rgba(221,122,94,0.22); transform: translateY(-2px); } .eau-btn--link { height: auto; padding: 0; border-radius: 0; background: none; color: var(--jade-300); box-shadow: none; } .eau-btn--link::after { display: none; } .eau-btn--link:hover { color: var(--gold-300); } .eau-btn--link:hover svg { transform: translateX(3px); } .eau-btn--sm { --_h: 38px; padding: 0 var(--sp-4); font-size: var(--fs-xs); } .eau-btn--lg { --_h: 58px; padding: 0 var(--sp-8); font-size: var(--fs-md); } .eau-btn--block { display: flex; width: 100%; } .eau-btn--icon { width: var(--_h); padding: 0; border-radius: var(--r-pill); } .eau-btn--icon.eau-btn--sm { width: 38px; } .eau-btn--icon.eau-btn--lg { width: 58px; } .eau-btn.is-loading { color: transparent !important; pointer-events: none; } .eau-btn.is-loading::before { content: ""; position: absolute; z-index: 3; width: 1.1em; height: 1.1em; border-radius: 999px; border: 2px solid currentColor; border-top-color: transparent; color: var(--on-jade); animation: eau-spin 0.7s linear infinite; } .eau-btn--ghost.is-loading::before, .eau-btn--soft.is-loading::before { color: var(--jade-300); } /* Default look for raw form-action elements (no class) */ button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not([class]), input[type="reset"]:not([class]) { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 var(--sp-6); font-weight: 600; font-size: var(--fs-sm); border-radius: var(--r-pill); background: var(--grad-jade); color: var(--on-jade); border: none; cursor: pointer; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); } button:not([class]):hover { transform: translateY(-2px); box-shadow: var(--glow-jade); } /* ========================================================================= 6. FORMS ========================================================================= */ .eau-field { display: flex; flex-direction: column; gap: var(--sp-2); } label, .eau-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); letter-spacing: 0.005em; } .eau-label .eau-req { color: var(--danger-bright); margin-left: 0.15em; } .eau-label--optional { font-weight: 400; color: var(--text-muted); } input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], textarea, select, .eau-input { width: 100%; min-height: 50px; padding: 0.78em 1em; font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.4; color: var(--text-strong); background: var(--ink-800); border: 1px solid var(--line-2); border-radius: var(--r-md); transition: border-color var(--t) var(--ease), background-color var(--t) var(--ease), box-shadow var(--t) var(--ease); appearance: none; } textarea, .eau-input--area { min-height: 130px; resize: vertical; line-height: 1.6; } input::placeholder, textarea::placeholder { color: var(--text-faint); } input:hover, textarea:hover, select:hover { border-color: var(--line-3); background-color: var(--ink-850); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--jade-500); background-color: var(--ink-850); box-shadow: var(--ring); } /* Custom select caret + themed options */ select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236FC9AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; padding-right: 2.6em; cursor: pointer; } select option { background: var(--ink-700); color: var(--text-strong); } select optgroup { background: var(--ink-800); color: var(--gold-300); font-style: normal; font-weight: 600; } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { opacity: 0.4; } ::-webkit-calendar-picker-indicator { filter: invert(0.7) sepia(1) saturate(3) hue-rotate(110deg); cursor: pointer; } /* Input group : leading icon / prefix / suffix affix */ .eau-inputgroup { display: flex; align-items: stretch; background: var(--ink-800); border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .eau-inputgroup:focus-within { border-color: var(--jade-500); box-shadow: var(--ring); } .eau-inputgroup input, .eau-inputgroup select { border: none; background-color: transparent; box-shadow: none; border-radius: 0; } .eau-inputgroup input:focus, .eau-inputgroup select:focus { box-shadow: none; background-color: transparent; } .eau-inputgroup-affix { display: inline-flex; align-items: center; gap: 0.4em; padding-inline: 1em; color: var(--text-muted); font-size: var(--fs-sm); background: var(--ink-700); } .eau-inputgroup-affix svg { width: 18px; height: 18px; stroke: var(--jade-400); stroke-width: 1.8; } .eau-inputgroup-affix--plain { background: transparent; } /* Validation states */ input.is-valid, textarea.is-valid, select.is-valid, .eau-field--valid input, .eau-field--valid textarea, .eau-field--valid select { border-color: var(--jade-500); background: var(--success-soft); } input.is-invalid, textarea.is-invalid, select.is-invalid, .eau-field--invalid input, .eau-field--invalid textarea, .eau-field--invalid select { border-color: var(--danger); background: var(--danger-soft); } input.is-invalid:focus, .eau-field--invalid input:focus { box-shadow: 0 0 0 3px rgba(221,122,94,0.32); } .eau-help { font-size: var(--fs-xs); color: var(--text-muted); } .eau-error { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--fs-xs); font-weight: 500; color: var(--danger-bright); } .eau-error svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; } .eau-success-msg { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--fs-xs); font-weight: 500; color: var(--jade-300); } .eau-success-msg svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; } fieldset.eau-fieldset { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--sp-6); } fieldset.eau-fieldset legend { padding-inline: var(--sp-3); font-family: var(--font-display); font-size: var(--fs-lg); color: var(--text-strong); } /* ---- Checkbox ---- */ .eau-check { display: inline-flex; align-items: center; gap: 0.7em; cursor: pointer; user-select: none; font-size: var(--fs-base); color: var(--text); } .eau-check input { position: absolute; opacity: 0; width: 0; height: 0; } .eau-check-box { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-3); background: var(--ink-700); display: grid; place-items: center; transition: all var(--t) var(--ease); } .eau-check-box svg { width: 14px; height: 14px; stroke: var(--on-jade); stroke-width: 3; opacity: 0; transform: scale(0.4); transition: all var(--t) var(--ease-spring); } .eau-check input:checked + .eau-check-box { background: var(--grad-jade); border-color: transparent; box-shadow: 0 4px 14px var(--jade-glow); } .eau-check input:checked + .eau-check-box svg { opacity: 1; transform: scale(1); } .eau-check input:focus-visible + .eau-check-box { box-shadow: var(--ring); } .eau-check:hover .eau-check-box { border-color: var(--line-jade); } /* ---- Radio ---- */ .eau-radio { display: inline-flex; align-items: center; gap: 0.7em; cursor: pointer; user-select: none; color: var(--text); } .eau-radio input { position: absolute; opacity: 0; width: 0; height: 0; } .eau-radio-dot { flex: none; width: 22px; height: 22px; border-radius: 999px; border: 1.5px solid var(--line-3); background: var(--ink-700); display: grid; place-items: center; transition: all var(--t) var(--ease); } .eau-radio-dot::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--grad-jade); transform: scale(0); transition: transform var(--t) var(--ease-spring); } .eau-radio input:checked + .eau-radio-dot { border-color: var(--jade-500); box-shadow: 0 0 12px var(--jade-glow); } .eau-radio input:checked + .eau-radio-dot::after { transform: scale(1); } .eau-radio input:focus-visible + .eau-radio-dot { box-shadow: var(--ring); } .eau-radio:hover .eau-radio-dot { border-color: var(--line-jade); } /* ---- Toggle switch ---- */ .eau-switch { display: inline-flex; align-items: center; gap: 0.75em; cursor: pointer; user-select: none; color: var(--text); } .eau-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .eau-switch-track { position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px; background: var(--ink-600); border: 1px solid var(--line-2); transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .eau-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: linear-gradient(180deg, #ffffff, #d9e6e0); box-shadow: 0 2px 6px rgba(0,0,0,0.45); transition: transform var(--t) var(--ease-spring); } .eau-switch input:checked + .eau-switch-track { background: var(--grad-jade); border-color: transparent; box-shadow: 0 0 16px var(--jade-glow), inset 0 1px 0 rgba(255,255,255,0.25); } .eau-switch input:checked + .eau-switch-track::after { transform: translateX(22px); } .eau-switch input:focus-visible + .eau-switch-track { box-shadow: var(--ring); } .eau-switch--gold input:checked + .eau-switch-track { background: var(--grad-gold); box-shadow: 0 0 16px var(--gold-glow); } /* ---- Range slider (water fill) ---- */ .eau-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: transparent; cursor: pointer; } .eau-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--jade-500) 0 var(--_fill, 50%), var(--ink-600) var(--_fill, 50%) 100%); } .eau-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--ink-600); } .eau-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--jade-500); } .eau-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -8px; width: 22px; height: 22px; border-radius: 999px; background: linear-gradient(180deg, #ffffff, #cfe2da); border: 3px solid var(--jade-500); box-shadow: 0 0 14px var(--jade-glow); transition: transform var(--t) var(--ease-spring); } .eau-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 999px; background: #fff; border: 3px solid var(--jade-500); box-shadow: 0 0 14px var(--jade-glow); } .eau-range:hover::-webkit-slider-thumb { transform: scale(1.12); } .eau-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); } /* ---- File input ---- */ .eau-file { position: relative; display: inline-flex; } .eau-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .eau-file-label { display: inline-flex; align-items: center; gap: 0.6em; height: 50px; padding: 0 var(--sp-5); border: 1.5px dashed var(--line-3); border-radius: var(--r-md); color: var(--text-soft); font-size: var(--fs-sm); font-weight: 500; background: var(--ink-800); transition: all var(--t) var(--ease); } .eau-file-label svg { width: 18px; height: 18px; stroke: var(--jade-400); stroke-width: 1.8; } .eau-file:hover .eau-file-label { border-color: var(--line-jade); color: var(--jade-200); background: var(--jade-faint); } /* ========================================================================= 7. CARDS + SURFACES ========================================================================= */ .eau-card { position: relative; background: linear-gradient(180deg, var(--ink-700), var(--ink-800)); border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: var(--sp-8); box-shadow: var(--shadow); overflow: hidden; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); } /* Meniscus : faint highlight on the top edge, like light on still water */ .eau-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 50%; background: var(--grad-sheen); pointer-events: none; opacity: 0.6; } .eau-card > * { position: relative; } .eau-card--hover:hover { transform: translateY(-4px); border-color: var(--line-3); box-shadow: var(--shadow-lg); } .eau-card--glass { background: rgba(18,35,38,0.55); backdrop-filter: blur(18px) saturate(1.2); } .eau-card--gold { border-color: var(--line-gold); box-shadow: var(--shadow), inset 0 0 0 1px var(--gold-faint); } .eau-card--gold::before { background: linear-gradient(180deg, rgba(228,206,154,0.14), transparent 42%); } .eau-card--feature:hover { transform: translateY(-4px); box-shadow: var(--glow-jade), var(--shadow-lg); border-color: var(--line-jade); } .eau-card-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); } .eau-card-title { font-family: var(--font-display); font-size: 1.35rem; color: var(--text-strong); } .eau-card-body { color: var(--text-soft); } .eau-card-foot { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .eau-glass { background: rgba(18,35,38,0.5); backdrop-filter: blur(16px) saturate(1.15); border: 1px solid var(--line-2); border-radius: var(--r-lg); } /* ========================================================================= 8. BADGES / PILLS / CHIPS / TAGS / PRICE ========================================================================= */ .eau-badge { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.32em 0.75em; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; border-radius: var(--r-pill); background: var(--jade-soft); color: var(--jade-200); border: 1px solid var(--line-jade); } .eau-badge svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; } .eau-badge--gold { background: var(--gold-soft); color: var(--gold-200); border-color: var(--line-gold); } .eau-badge--info { background: var(--info-soft); color: var(--info); border-color: rgba(111,182,198,0.34); } .eau-badge--warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(214,161,78,0.34); } .eau-badge--danger { background: var(--danger-soft); color: var(--danger-bright); border-color: rgba(221,122,94,0.34); } .eau-badge--solid { background: var(--grad-jade); color: var(--on-jade); border-color: transparent; box-shadow: 0 4px 14px var(--jade-glow); } .eau-pill { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.4em 0.9em 0.4em 0.7em; font-size: var(--fs-xs); font-weight: 600; border-radius: var(--r-pill); background: var(--ink-700); border: 1px solid var(--line-2); color: var(--text-soft); } .eau-pill-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; background: var(--jade-400); box-shadow: 0 0 0 3px var(--jade-faint); animation: eau-pulse 2.4s var(--ease) infinite; } .eau-chip { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.5em 1em; font-size: var(--fs-sm); font-weight: 500; border-radius: var(--r-pill); background: var(--ink-700); border: 1px solid var(--line-2); color: var(--text-soft); cursor: pointer; transition: all var(--t) var(--ease); } .eau-chip svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; } .eau-chip:hover { border-color: var(--line-jade); color: var(--jade-200); } .eau-chip.is-active { background: var(--jade-soft); border-color: var(--jade-500); color: var(--jade-200); } .eau-tag { display: inline-flex; align-items: center; padding: 0.2em 0.6em; font-size: var(--fs-xs); font-weight: 500; border-radius: var(--r-xs); background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid var(--line); } .eau-price { display: inline-flex; align-items: baseline; gap: 0.15em; font-family: var(--font-display); font-variant-numeric: tabular-nums; } .eau-price-cur { font-size: 0.7em; color: var(--gold-400); font-weight: 500; } .eau-price-amt { font-size: 1.6em; color: var(--text-strong); font-weight: 500; } .eau-price-per { font-family: var(--font-sans); font-size: 0.5em; color: var(--text-muted); font-weight: 500; } /* ========================================================================= 9. AVATAR ========================================================================= */ .eau-avatar { position: relative; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: var(--ink-600); color: var(--jade-200); font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; overflow: hidden; flex: none; } .eau-avatar img { width: 100%; height: 100%; object-fit: cover; } .eau-avatar--ring { box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 3.5px var(--gold-500); } .eau-avatar--jade { box-shadow: 0 0 0 2px var(--ink-900), 0 0 0 3.5px var(--jade-500); } .eau-avatar--lg { width: 84px; height: 84px; font-size: 1.7rem; } .eau-avatar--sm { width: 40px; height: 40px; font-size: 0.9rem; } /* ========================================================================= 10. STAT BLOCK ========================================================================= */ .eau-stat { display: flex; flex-direction: column; gap: 0.2em; } .eau-stat-num { font-family: var(--font-display); font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.4rem); font-weight: 480; line-height: 1; letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; } .eau-stat-num .eau-stat-sup { color: var(--gold-400); } .eau-stat-label { font-size: var(--fs-sm); color: var(--text-muted); letter-spacing: 0.02em; } /* ========================================================================= 11. ALERTS / CALLOUTS ========================================================================= */ .eau-alert { display: flex; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--ink-700); color: var(--text-soft); border-left-width: 3px; } .eau-alert-ico { flex: none; width: 22px; height: 22px; } .eau-alert-ico svg { width: 22px; height: 22px; stroke-width: 1.8; } .eau-alert-body { font-size: var(--fs-sm); } .eau-alert-title { font-weight: 600; color: var(--text-strong); margin-bottom: 0.15em; } .eau-alert--info { border-left-color: var(--info); background: var(--info-soft); } .eau-alert--info .eau-alert-ico svg { stroke: var(--info); } .eau-alert--success { border-left-color: var(--jade-500); background: var(--success-soft); } .eau-alert--success .eau-alert-ico svg { stroke: var(--jade-400); } .eau-alert--warn { border-left-color: var(--warn); background: var(--warn-soft); } .eau-alert--warn .eau-alert-ico svg { stroke: var(--warn); } .eau-alert--danger { border-left-color: var(--danger); background: var(--danger-soft); } .eau-alert--danger .eau-alert-ico svg { stroke: var(--danger-bright); } /* ========================================================================= 12. TABLE ========================================================================= */ .eau-table-wrap { overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-lg); } table.eau-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .eau-table thead th { text-align: left; padding: var(--sp-4) var(--sp-5); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-300); background: var(--ink-800); border-bottom: 1px solid var(--line-2); white-space: nowrap; } .eau-table tbody td { padding: var(--sp-4) var(--sp-5); color: var(--text); border-bottom: 1px solid var(--line); } .eau-table tbody tr { transition: background var(--t) var(--ease); } .eau-table tbody tr:hover { background: var(--jade-faint); } .eau-table tbody tr:last-child td { border-bottom: none; } .eau-table td.eau-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-strong); font-weight: 500; } /* ========================================================================= 13. ACCORDION (details/summary, no JS) ========================================================================= */ .eau-accordion { display: flex; flex-direction: column; gap: var(--sp-3); } .eau-acc { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--ink-700); overflow: hidden; transition: border-color var(--t) var(--ease); } .eau-acc[open] { border-color: var(--line-jade); } .eau-acc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); font-weight: 600; color: var(--text-strong); cursor: pointer; list-style: none; transition: color var(--t) var(--ease); } .eau-acc summary::-webkit-details-marker { display: none; } .eau-acc summary:hover { color: var(--jade-200); } .eau-acc-ico { flex: none; width: 20px; height: 20px; transition: transform var(--t) var(--ease); } .eau-acc-ico svg { width: 20px; height: 20px; stroke: var(--jade-400); stroke-width: 2; } .eau-acc[open] .eau-acc-ico { transform: rotate(45deg); } .eau-acc-content { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-soft); font-size: var(--fs-sm); } /* ========================================================================= 14. TABS (CSS-only, radio driven, up to 4) ========================================================================= */ .eau-tabs { width: 100%; } .eau-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .eau-tabs-nav { display: inline-flex; gap: 0.3em; padding: 0.35em; background: var(--ink-800); border: 1px solid var(--line-2); border-radius: var(--r-pill); margin-bottom: var(--sp-6); flex-wrap: wrap; } .eau-tabs-nav label { padding: 0.55em 1.2em; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all var(--t) var(--ease); } .eau-tabs-nav label:hover { color: var(--text-soft); } .eau-tab-panel { display: none; animation: eau-rise var(--t-slow) var(--ease-out) both; } .eau-tabs input:nth-of-type(1):checked ~ .eau-tabs-nav label:nth-of-type(1), .eau-tabs input:nth-of-type(2):checked ~ .eau-tabs-nav label:nth-of-type(2), .eau-tabs input:nth-of-type(3):checked ~ .eau-tabs-nav label:nth-of-type(3), .eau-tabs input:nth-of-type(4):checked ~ .eau-tabs-nav label:nth-of-type(4) { background: var(--grad-jade); color: var(--on-jade); box-shadow: 0 4px 14px var(--jade-glow); } .eau-tabs input:nth-of-type(1):checked ~ .eau-tabs-body .eau-tab-panel:nth-of-type(1), .eau-tabs input:nth-of-type(2):checked ~ .eau-tabs-body .eau-tab-panel:nth-of-type(2), .eau-tabs input:nth-of-type(3):checked ~ .eau-tabs-body .eau-tab-panel:nth-of-type(3), .eau-tabs input:nth-of-type(4):checked ~ .eau-tabs-body .eau-tab-panel:nth-of-type(4) { display: block; } /* ========================================================================= 15. TOOLTIP (CSS-only) ========================================================================= */ .eau-tooltip { position: relative; display: inline-flex; } .eau-tooltip[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 0.5em 0.8em; background: var(--ink-600); color: var(--text-strong); border: 1px solid var(--line-3); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); z-index: var(--z-overlay); } .eau-tooltip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* ========================================================================= 16. PROGRESS / METER ========================================================================= */ .eau-progress { width: 100%; height: 10px; border-radius: 999px; background: var(--ink-600); overflow: hidden; border: 1px solid var(--line); } .eau-progress-bar { height: 100%; border-radius: 999px; background: var(--grad-jade); box-shadow: 0 0 14px var(--jade-glow); position: relative; transition: width var(--t-slow) var(--ease-out); } .eau-progress-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transform: translateX(-100%); animation: eau-sweep 2.4s var(--ease) infinite; } .eau-progress--gold .eau-progress-bar { background: var(--grad-gold); box-shadow: 0 0 14px var(--gold-glow); } /* ========================================================================= 17. DIVIDER WITH LABEL + HAIRLINE ========================================================================= */ .eau-divider { display: flex; align-items: center; gap: var(--sp-4); color: var(--text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.18em; } .eau-divider::before, .eau-divider::after { content: ""; flex: 1; height: 1px; background: var(--grad-hairline); opacity: 0.7; } .eau-hairline { height: 1px; background: var(--grad-hairline); border: none; opacity: 0.7; } /* ========================================================================= 18. ICON TILE (service icon container) ========================================================================= */ .eau-icontile { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: var(--r-md); background: var(--jade-soft); border: 1px solid var(--line-jade); color: var(--jade-300); flex: none; transition: all var(--t) var(--ease); } .eau-icontile svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.7; } .eau-icontile--gold { background: var(--gold-soft); border-color: var(--line-gold); color: var(--gold-300); } .eau-card--feature:hover .eau-icontile { transform: scale(1.06) rotate(-3deg); box-shadow: 0 8px 22px var(--jade-glow); } /* ========================================================================= 19. SPINNER ========================================================================= */ .eau-spinner { display: inline-block; width: 26px; height: 26px; border-radius: 999px; border: 2.5px solid var(--ink-500); border-top-color: var(--jade-400); border-right-color: var(--gold-400); animation: eau-spin 0.8s linear infinite; } /* ========================================================================= 20. KEYFRAMES ========================================================================= */ @keyframes eau-spin { to { transform: rotate(360deg); } } @keyframes eau-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--jade-glow); } 50% { box-shadow: 0 0 0 5px transparent; } } @keyframes eau-sweep { to { transform: translateX(100%); } } @keyframes eau-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes eau-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-2%, 1.5%, 0) scale(1.05); } } @keyframes eau-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .eau-reveal { opacity: 0; transform: translateY(16px); animation: eau-rise 0.7s var(--ease-out) forwards; } .eau-reveal[data-delay="1"] { animation-delay: 0.08s; } .eau-reveal[data-delay="2"] { animation-delay: 0.16s; } .eau-reveal[data-delay="3"] { animation-delay: 0.24s; } .eau-reveal[data-delay="4"] { animation-delay: 0.32s; } .eau-reveal[data-delay="5"] { animation-delay: 0.40s; } .eau-reveal[data-delay="6"] { animation-delay: 0.48s; } /* ========================================================================= 21. UTILITIES ========================================================================= */ .eau-text-strong { color: var(--text-strong); } .eau-text-soft { color: var(--text-soft); } .eau-text-muted { color: var(--text-muted); } .eau-text-jade { color: var(--jade-300); } .eau-text-gold { color: var(--gold-300); } .eau-text-center { text-align: center; } .eau-text-right { text-align: right; } .eau-glow-jade { box-shadow: var(--glow-jade); } .eau-glow-gold { box-shadow: var(--glow-gold); } .eau-float { animation: eau-float 6s var(--ease) infinite; } .eau-surface-1 { background: var(--ink-800); } .eau-surface-2 { background: var(--ink-700); } .eau-surface-3 { background: var(--ink-600); } .eau-tint-jade { background: var(--jade-faint); } .eau-tint-gold { background: var(--gold-faint); } .eau-mt-0 { margin-top: 0; } .eau-mt-2 { margin-top: var(--sp-2); } .eau-mt-4 { margin-top: var(--sp-4); } .eau-mt-6 { margin-top: var(--sp-6); } .eau-mt-8 { margin-top: var(--sp-8); } .eau-mb-4 { margin-bottom: var(--sp-4); } .eau-mb-6 { margin-bottom: var(--sp-6); } .eau-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================= 22. RESPONSIVE ========================================================================= */ @media (max-width: 900px) { .eau-grid--4 { grid-template-columns: repeat(2, 1fr); } .eau-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .eau-grid--2, .eau-grid--3, .eau-grid--4 { grid-template-columns: 1fr; } .eau-card { padding: var(--sp-6); } blockquote { padding-left: var(--sp-4); } } /* iOS : keep form text >= 16px so focus never auto-zooms */ @media (max-width: 767px) { input, textarea, select { font-size: 16px; } } /* ========================================================================= END - eau-essentials.css - "Clear Water" ========================================================================= */