/** * Preluence News — visual system. * * One layer that turns the neutral components into a visual style chosen on * : futuristic (depth, glow, glass), modern (soft * shadows), editorial (print rules) or minimal (flat). Optional effects come * from data-effects ("glass atmosphere card-tilt") and motion from * data-motion. Everything here is transform/opacity/shadow — no layout * thrash, no permanent animation loops, no WebGL. */ /* ---------- Elevation tokens ---------- */ :root { --pn-shadow-sm: 0 1px 2px var(--pn-shadow-color, rgb(0 0 0 / 8%)); --pn-shadow-md: 0 1px 2px var(--pn-shadow-color, rgb(0 0 0 / 8%)), 0 10px 28px -16px var(--pn-shadow-color, rgb(0 0 0 / 20%)); --pn-shadow-lg: 0 2px 6px var(--pn-shadow-color, rgb(0 0 0 / 8%)), 0 26px 50px -24px var(--pn-shadow-color, rgb(0 0 0 / 30%)); --pn-lift: -3px; --pn-duration: 0.35s; } /* Fluid type scale shared by all styles. */ .pn-section-title { font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.4rem); } .pn-card--classic .pn-card__title { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); } /* ---------- Scroll reveal (motion.js adds .is-revealed) ---------- */ .pn-reveal [data-reveal] { opacity: 0; transition: opacity 0.7s var(--pn-ease), transform 0.8s var(--pn-ease), clip-path 0.9s var(--pn-ease); } .pn-reveal [data-reveal="fade-up"] { transform: translate3d(0, 28px, 0); } .pn-reveal [data-reveal="zoom"] { transform: scale(0.965); } .pn-reveal [data-reveal="slide"] { transform: translate3d(-40px, 0, 0); } [dir="rtl"].pn-reveal [data-reveal="slide"] { transform: translate3d(40px, 0, 0); } .pn-reveal [data-reveal="reveal"] { clip-path: inset(0 0 22% 0); transform: translate3d(0, 14px, 0); } .pn-reveal [data-reveal].is-revealed { opacity: 1; transform: none; clip-path: inset(0); } /* ---------- Cards: depth and interaction ---------- */ .pn-thumb, .pn-card--overlay { transition: transform var(--pn-duration) var(--pn-ease), box-shadow var(--pn-duration) var(--pn-ease); } [data-visual="futuristic"] .pn-thumb, [data-visual="modern"] .pn-thumb { box-shadow: var(--pn-shadow-md); } @media (hover: hover) { [data-visual="futuristic"] .pn-card--classic:hover .pn-thumb, [data-visual="modern"] .pn-card--classic:hover .pn-thumb { box-shadow: var(--pn-shadow-lg); transform: translate3d(0, var(--pn-lift), 0); } [data-visual="futuristic"] .pn-card--classic:hover .pn-thumb { box-shadow: var(--pn-shadow-lg), 0 18px 44px -22px var(--pn-glow); } [data-visual="futuristic"] .pn-card--overlay:hover { box-shadow: 0 22px 50px -24px var(--pn-glow); } } /* 3D tilt (motion.js sets --pn-tilt-x/y on fine pointers only). */ .pn-card--overlay.is-tilting, .pn-thumb.is-tilting { z-index: 1; transform: perspective(900px) rotateX(var(--pn-tilt-x, 0deg)) rotateY(var(--pn-tilt-y, 0deg)) translate3d(0, var(--pn-lift), 0); transition-duration: 0.12s; } .pn-card--overlay.is-tilting .pn-card__overlay { transform: translate3d(0, 0, 30px); } /* Hairline inner ring gives image cards a crisp edge on any background. */ [data-visual="futuristic"] .pn-card--overlay .pn-card__media::before, [data-visual="futuristic"] .pn-thumb::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%); pointer-events: none; } [data-visual="futuristic"] .pn-badge { box-shadow: 0 6px 18px -8px var(--pn-badge); } /* ---------- Section headings ---------- */ [data-visual="futuristic"] .pn-section-head { border-block-end: 0; background: linear-gradient(90deg, var(--pn-border), transparent 85%) left bottom / 100% 1px no-repeat; } [dir="rtl"][data-visual="futuristic"] .pn-section-head { background-image: linear-gradient(270deg, var(--pn-border), transparent 85%); background-position: right bottom; } [data-visual="futuristic"] .pn-section-title { display: flex; align-items: center; gap: 0.6em; margin-block-end: 0; border-block-end: 0; } [data-visual="futuristic"] .pn-section-title::before { content: ""; flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--pn-badge); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pn-badge) 20%, transparent), 0 0 14px var(--pn-badge); } [data-visual="futuristic"] .pn-section-title > span { padding-block-end: 0.45rem; background: linear-gradient(90deg, var(--pn-badge), color-mix(in srgb, var(--pn-badge) 20%, var(--pn-secondary, var(--pn-badge)))) left bottom / 100% 3px no-repeat; } [data-visual="editorial"] .pn-section-head { border-block-end: 3px double var(--pn-text); } [data-visual="editorial"] .pn-section-title { border-block-end: 0; font-family: var(--pn-font-heading); letter-spacing: 0; text-transform: none; } [data-visual="minimal"] .pn-section-head { border-block-end-width: 1px; } [data-visual="minimal"] .pn-section-title { border-block-end-width: 1px; font-weight: 600; } /* ---------- Buttons ---------- */ [data-visual="futuristic"] .pn-button:not(.pn-button--outline) { background: var(--pn-gradient); box-shadow: 0 10px 26px -12px var(--pn-glow); transition: box-shadow var(--pn-duration) var(--pn-ease), transform var(--pn-duration) var(--pn-ease); } [data-visual="futuristic"] .pn-button:not(.pn-button--outline):hover { box-shadow: 0 16px 34px -12px var(--pn-glow); transform: translate3d(0, -1px, 0); } /* Numbered ranking: gradient numerals. */ .pn-blocks-w--numbered .pn-headline__num { font-size: 2.1rem; font-weight: 800; } [data-visual="futuristic"] .pn-blocks-w--numbered .pn-headline__num { background: var(--pn-gradient); background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* ---------- Atmosphere ---------- */ [data-effects~="atmosphere"] body { isolation: isolate; } [data-effects~="atmosphere"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(60vw 42vw at 8% -12%, color-mix(in srgb, var(--pn-primary) 11%, transparent), transparent 70%), radial-gradient(52vw 36vw at 100% 4%, color-mix(in srgb, var(--pn-secondary, var(--pn-primary)) 9%, transparent), transparent 72%), radial-gradient(40vw 30vw at 50% 110%, color-mix(in srgb, var(--pn-primary) 6%, transparent), transparent 70%); pointer-events: none; } /* ---------- Glass ---------- */ [data-effects~="glass"] .pn-sticky-target.is-stuck { background-color: color-mix(in srgb, var(--pn-h-bg) 78%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--pn-h-text) 10%, transparent), 0 12px 30px -18px var(--pn-shadow-color); backdrop-filter: blur(16px) saturate(1.5); } [data-effects~="glass"] .pn-primary-nav .sub-menu { background-color: color-mix(in srgb, var(--pn-bg) 86%, transparent); backdrop-filter: blur(18px) saturate(1.4); } @supports not (backdrop-filter: blur(1px)) { [data-effects~="glass"] .pn-sticky-target.is-stuck, [data-effects~="glass"] .pn-primary-nav .sub-menu { background-color: var(--pn-h-bg, var(--pn-bg)); } } /* ---------- Navigation indicator (motion.js) ---------- */ .pn-menu.has-indicator { position: relative; } .pn-menu.has-indicator > li > a, .pn-menu.has-indicator > li > a:hover, .pn-menu.has-indicator > .current-menu-item > a, .pn-menu.has-indicator > .current-menu-ancestor > a { box-shadow: none; } .pn-nav-indicator { position: absolute; top: 0; /* Physical: positioned from offsetLeft/offsetTop in JS. */ left: 0; height: 3px; border-radius: 3px; background: var(--pn-accent); box-shadow: 0 0 12px color-mix(in srgb, var(--pn-accent) 60%, transparent); opacity: 0; pointer-events: none; transition: transform 0.35s var(--pn-ease), width 0.35s var(--pn-ease), opacity 0.2s; } [data-visual="futuristic"] .pn-nav-indicator { background: linear-gradient(90deg, var(--pn-accent), var(--pn-secondary, var(--pn-accent))); } /* ---------- Dark mode language ---------- */ [data-color-scheme="dark"] .pn-thumb img, [data-color-scheme="dark"] .pn-card__media img { filter: brightness(0.94) saturate(1.04); } [data-color-scheme="dark"][data-visual="futuristic"] .pn-fp-section.pn-fp-bg--surface, [data-color-scheme="dark"][data-visual="futuristic"] .pn-fp-row--full.pn-fp-bg--surface { background: linear-gradient(180deg, var(--pn-surface-elevated), var(--pn-surface)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%); } [data-color-scheme="dark"] .pn-section-head { --pn-border: color-mix(in srgb, var(--pn-text) 16%, var(--pn-bg)); } /* ---------- Minimal & editorial: flatter surfaces ---------- */ [data-visual="minimal"] .pn-thumb, [data-visual="editorial"] .pn-thumb { box-shadow: none; } [data-visual="minimal"] .pn-card:hover .pn-thumb img { transform: none; } /* ---------- Touch & reduced motion ---------- */ @media (hover: none) { .pn-thumb, .pn-card--overlay { transition: none; } } @media (prefers-reduced-motion: reduce) { .pn-reveal [data-reveal] { opacity: 1; transform: none; clip-path: none; transition: none; } .pn-thumb, .pn-card--overlay, .pn-thumb img, .pn-nav-indicator { transition: none; } .pn-card:hover .pn-thumb img { transform: none; } } [data-motion="none"] .pn-thumb img, [data-motion="none"] .pn-card--overlay .pn-card__media img { transition: none; }