/* ============================================================ SKIN — Card Media Library ============================================================ Composable card-media surfaces. Three independent axes: 1. WASH — the gradient fill (.card-media--) 2. SHAPE — a ::before figure (.card-media--fx-) 3. PATTERN — a ::after texture (.card-media--fx-) Mix freely, e.g.:
One shape (::before) + one pattern (::after) per element. Loaded AFTER components.css (see default.hbs) so the wash modifiers override the base .card-media background. The base .card-media box + the heat/sky/dusk washes live in components.css; this file extends, never duplicates. ============================================================ */ /* ── 1. Washes ─────────────────────────────────────────────── */ .card-media--dawn { background: var(--gradient-dawn); } .card-media--ocean { background: var(--gradient-ocean); } .card-media--gold { background: var(--gradient-gold); } .card-media--ink { background: var(--gradient-ink); } /* ── 2. Geometric overlays (::before) ────────────────────────── Every figure is centered and symmetric. Pick at most one. */ .card-media--fx-arch::before, .card-media--fx-diamond::before, .card-media--fx-eclipse::before, .card-media--fx-bars::before, .card-media--fx-rings::before, .card-media--fx-cross::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; } /* Arch — symmetric doorway, open at the base */ .card-media--fx-arch::before { width: 86px; height: 112px; border: 7px solid rgba(255, 255, 255, 0.78); border-bottom: 0; border-radius: 43px 43px 0 0; } /* Diamond — clean centered rhombus */ .card-media--fx-diamond::before { width: 104px; height: 104px; background: rgba(255, 255, 255, 0.5); clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%); } /* Eclipse — dark disc ringed with concentric halos */ .card-media--fx-eclipse::before { width: 102px; height: 102px; border-radius: 50%; background: rgba(0, 0, 0, 0.30); box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.10), 0 0 0 24px rgba(0, 0, 0, 0.07); } /* Bars — three even vertical columns */ .card-media--fx-bars::before { width: 124px; height: 84px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0 24px, transparent 24px 50px, rgba(255, 255, 255, 0.6) 50px 74px, transparent 74px 100px, rgba(255, 255, 255, 0.6) 100px 124px); } /* Rings — concentric outline circles */ .card-media--fx-rings::before { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 12px transparent, 0 0 0 14px rgba(255, 255, 255, 0.34), 0 0 0 26px transparent, 0 0 0 28px rgba(255, 255, 255, 0.20); } /* Cross — centered plus mark */ .card-media--fx-cross::before { width: 92px; height: 92px; background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)) center / 20px 100% no-repeat, linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)) center / 100% 20px no-repeat; } /* ── 3. Pattern / texture overlays (::after) ───────────────── */ .card-media--fx-halftone::after, .card-media--fx-grid::after, .card-media--fx-stripes::after, .card-media--fx-topo::after, .card-media--fx-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; } /* Halftone — dot screen */ .card-media--fx-halftone::after { background-image: radial-gradient(rgba(255, 255, 255, 0.5) 1.5px, transparent 1.6px); background-size: 14px 14px; } /* Grid — fine ruled lines */ .card-media--fx-grid::after { background-image: linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px); background-size: 26px 26px; } /* Stripes — diagonal hatch */ .card-media--fx-stripes::after { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.12) 0 10px, transparent 10px 20px); } /* Topo — contour-line rings */ .card-media--fx-topo::after { background-image: repeating-radial-gradient(circle at 28% 118%, transparent 0 17px, rgba(255, 255, 255, 0.16) 17px 18px); } /* Grain — fractal-noise film */ .card-media--fx-grain::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.4; mix-blend-mode: overlay; } /* ── 4. Duotone photo ────────────────────────────────────────── Two-tone treatment for real images: the image is desaturated, then shadows take --duotone-dark and highlights take --duotone-light. Put an inside; uses BOTH pseudo-elements, so do not combine with the fx-shape / fx-pattern overlays. Default tones are a crisp cool slate→porcelain. Override the two custom props for a one-off, or add .card-media--duotone-pop for the bold slate→orange brand treatment (featured / hero use). */ .card-media--duotone, .card-media--duotone-pop { isolation: isolate; --duotone-dark: #16212c; /* deep slate (shadows) */ --duotone-light: #eef3f4; /* porcelain (highlights) */ } .card-media--duotone img, .card-media--duotone-pop img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); } .card-media--duotone::before, .card-media--duotone::after, .card-media--duotone-pop::before, .card-media--duotone-pop::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .card-media--duotone::before, .card-media--duotone-pop::before { /* shadows → dark tone */ z-index: 1; background: var(--duotone-dark); mix-blend-mode: lighten; } .card-media--duotone::after, .card-media--duotone-pop::after { /* highlights → light tone */ z-index: 2; background: var(--duotone-light); mix-blend-mode: darken; } /* Bold variant — slate shadows, orange highlights (the watch's seconds hand). Just overrides the tones; mechanism above. */ .card-media--duotone-pop { --duotone-dark: #293a4b; --duotone-light: #c8552c; }