@font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 100 1000; font-stretch: 100%; font-display: swap; src: url(../fonts/google-sans-flex-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 100 1000; font-stretch: 100%; font-display: swap; src: url(../fonts/google-sans-flex-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 100 1000; font-stretch: 100%; font-display: swap; src: url(../fonts/google-sans-flex-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* DFVN HUB — semantic tokens, one component layer, no overrides. */ :root { --font-thin:100; --font-extralight:200; --font-light:300; --font-regular:400; --font-medium:500; --font-semibold:600; --font-bold:700; --font-extrabold:800; --font-black:900; color-scheme: light; --bg: #ffffff; --surface: #eeeeea; --ink: #161616; --muted: #686861; --paragraph-ink: #121212; --line: #d9d9d2; --accent: #d9f429; --accent-ink: #161616; --lavender: #ddd6fc; --error: #9c4233; --header-bg: var(--bg); --glass-bg: color-mix(in srgb, var(--surface) 70%, transparent); --glass-edge: #ffffffa8; --glass-shine: #ffffffd9; --glass-shadow: #20251a1a; --glass-tint: #ffffff08; --hero-ink: #ffffff; --hero-shade: #161616a6; --hero-from: #969e85; --hero-to: #dfe3c9; --focus: var(--ink); --link: var(--ink); --link-hover: var(--ink); --hover-opacity: .7; --button-bg: var(--ink); --button-ink: var(--bg); --button-height:48px; --button-padding:12px 22px; --button-size:var(--type-body-size); --button-weight:var(--font-medium,500); --field-height:52px; --field-padding:15px; --field-radius:13px; --field-size:var(--type-body-size); --form-label-size:var(--type-body-size); --field-bg:var(--bg); --field-line:var(--line); --radius: 20px; --card-radius:32px; --card-radius-compact:22px; --media-radius:64px; --pill: 999px; --gutter: 30px; --button-icon-gap: 8px; --footer-reveal-ink:#ffffff; --card-gap: clamp(18px, 2.8125vw, 36px); --card-section-gap: clamp(64px, 7.5vw, 96px); --card-title-size: 26px; --card-price-size: var(--type-body-size); --card-label-size: var(--type-micro-size); --card-meta-space: 18px; --card-title-leading: 1.25; --product-copy-size: var(--prose-size); --product-copy-leading: var(--prose-leading); --product-section-size: var(--prose-heading-size); --product-paragraph-space: var(--prose-paragraph-gap); --product-heading-space: var(--prose-heading-gap); --product-price-size: 40px; --gap: clamp(16px, 1.6vw, 28px); --space: clamp(56px, 7vw, 112px); --site-width: var(--content-width,100%); --footer-bottom-space: clamp(24px, 2vw, 48px); --commerce-max: var(--site-width); --panel-padding: clamp(24px, 3vw, 44px); --max: var(--site-width); --header-max: 1120px; --header-height: 112px; --header-icon-size: 24px; --close-icon-size: 18px; --brand-symbol-size: 34px; --header-offset: 16px; --admin-offset: 0px; --glass-blur: 22px; --glass-saturation: 170%; --dropdown-bg: color-mix(in srgb, var(--bg) 86%, transparent); --dropdown-edge: color-mix(in srgb, var(--glass-edge) 76%, transparent); --dropdown-blur: 24px; --dropdown-saturation: 160%; --dropdown-card-bg: color-mix(in srgb, var(--surface) 95%, transparent); --dropdown-utility-bg: color-mix(in srgb, var(--surface) 88%, transparent); --search-row-height: 76px; --search-results-cap: 760px; --search-divider: color-mix(in srgb, var(--line) 45%, transparent); --dropdown-gap: 10px; --dropdown-radius: 34px; --dropdown-padding: clamp(18px, 2.5vw, 30px); --dropdown-shadow: inset 0 1px 0 var(--glass-shine), 0 14px 36px var(--glass-shadow); --dropdown-duration: 220ms; --search-result-arrow-size: 38px; --search-result-icon-size: 18px; --search-hover-distance: 4px; --search-hover-arrow: 2px; --search-hover-button: -1px; --search-hover-bg: color-mix(in srgb, var(--surface) 92%, var(--ink)); --search-motion-ease: cubic-bezier(.22,1,.36,1); --search-open-duration: 360ms; --search-reveal-duration: 320ms; --search-card-duration: 300ms; --dfvn-body-font: 'Google Sans Flex', Arial, sans-serif; --dfvn-title-font: var(--dfvn-body-font); --dfvn-title-letter-spacing: -.01em; --body-font: var(--dfvn-body-font); --display-font: var(--dfvn-title-font); --font-weight: 400; --font-heading:var(--font-medium,500); --font-brand:var(--font-extrabold,800); --small: var(--type-meta-size); --body-size: var(--type-body-size); --title: var(--page-title-size); --product-subtitle-size:calc(var(--lead-size) - 2px); --content-narrow-width:1200px; --page-title-size:clamp(48px,6vw,88px); --page-title-leading:1.08; --section-title-size:clamp(34px,4vw,56px); --section-title-leading:1.08; --lead-size:18px; --lead-leading:1.65; --lead-ink:var(--muted); --heading-ink:var(--ink); --title-lead-gap:16px; --heading-card-gap:32px; --card-copy-size:var(--type-body-size); --footer-panel-radius:64px; /* UI type and rhythm contract. Edit roles here; component aliases inherit these values. */ --type-minimum-size:8px; --type-tiny-size:9px; --type-micro-size:10px; --type-caption-size:11px; --type-meta-size:12px; --type-small-size:13px; --type-copy-size:14px; --type-answer-size:15px; --type-body-size:16px; --type-label-size:17px; --type-emphasis-size:18px; --body-leading:1.5; --copy-leading:1.65; --caption-leading:1.5; --compact-title-size:20px; --compact-title-leading:1.3; --panel-title-size:24px; --panel-title-leading:1.25; --dialog-title-size:clamp(24px,2.6vw,30px); --dialog-title-leading:1.2; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px; --space-10:40px; --space-12:48px; --space-14:56px; --space-16:64px; --eyebrow-title-gap:var(--space-4); --lead-action-gap:var(--space-6); --page-start-space:var(--space-10); --page-heading-content-gap:var(--heading-card-gap); --card-title-copy-gap:var(--space-3); --shop-heading-start-space:var(--page-start-space); --account-title-size:clamp(2.55rem,4vw,3.9rem); --account-title-leading:var(--page-title-leading); --account-lead-size:var(--lead-size); --account-lead-leading:var(--lead-leading); --account-section-title-size:clamp(24px,2.4vw,32px); --account-section-title-leading:var(--panel-title-leading); --account-card-title-size:clamp(20px,1.7vw,26px); --account-card-title-leading:var(--card-title-leading); --account-row-title-size:18px; --account-row-title-leading:1.3; --account-title-lead-gap:var(--space-3); --account-heading-content-gap:var(--space-7); --account-profile-name-size:22px; --account-profile-vip-name-size:26px; --account-row-title-copy-gap:var(--space-2); --account-card-eyebrow-gap:var(--space-2); --auth-title-size:clamp(2.1rem,3.3vw,4.2rem); --auth-title-leading:var(--page-title-leading); --auth-title-lead-gap:var(--space-3); --auth-brand-title-size:clamp(2rem,3.2vw,3.4rem); --form-title-size:clamp(30px,3vw,40px); --form-title-leading:1.16; --cover-title-size:var(--page-title-size); --cover-title-leading:var(--page-title-leading); --notice-title-size:var(--type-body-size); --notice-title-leading:1.4; --form-section-title-size:18px; --form-section-title-leading:1.4; --account-table-size:var(--type-body-size); --account-table-leading:var(--body-leading); --commerce-table-size:var(--type-body-size); --commerce-table-leading:var(--body-leading); --field-error-size:var(--type-meta-size); --field-help-size:var(--type-caption-size); --field-error-leading:1.4; --field-feedback-gap:var(--space-2); --form-label-compact-size:var(--type-meta-size); --prose-size:18px; --prose-leading:1.75; --prose-heading-size:32px; --prose-subheading-size:24px; --prose-heading-leading:1.22; --prose-paragraph-gap:22px; --prose-heading-gap:36px; --prose-heading-copy-gap:var(--space-4); --prose-list-gap:var(--space-4); --prose-list-item-gap:var(--space-2); --prose-caption-size:var(--type-meta-size); --prose-caption-leading:var(--copy-leading); --prose-table-size:var(--type-body-size); --prose-table-leading:1.6; --prose-table-cell-space:var(--space-4) var(--space-5); --prose-table-caption-size:var(--type-small-size); --article-title-size:clamp(3.4rem,6.3vw,7.4rem); --article-title-leading:.99; --article-intro-size:clamp(1.12rem,1.55vw,1.4rem); --article-intro-leading:1.55; --article-copy-size:1.07rem; --article-copy-leading:1.8; --article-h2-size:clamp(2rem,3vw,3.15rem); --article-h3-size:clamp(1.45rem,2vw,2.1rem); --article-title-lead-gap:var(--space-6); --article-heading-content-gap:clamp(36px,5vw,72px); --article-paragraph-gap:var(--space-6); --article-section-gap:clamp(42px,5vw,74px); /* Editorial layouts retain a deliberate scale, independent of font specimen artwork. */ --feature-title-size:clamp(3.4rem,6.8vw,7rem); --feature-title-leading:1.02; --feature-section-size:var(--section-title-size); --feature-card-title-size:clamp(28px,3vw,44px); --feature-poster-title-size:clamp(4.7rem,9vw,9rem); --feature-poster-title-leading:.9; --club-calculator-title-size:clamp(43px,4.9vw,75px); --club-calculator-title-leading:1.09; --club-hero-title-size:clamp(36px,4.1vw,66px); --club-hero-title-leading:1.05; --product-cover-title-size:clamp(38px,3.3vw,52px); --product-centered-title-size:clamp(44px,6.2vw,128px); --product-centered-title-leading:.9; --product-feature-title-size:clamp(28px,3cqw,44px); --product-feature-title-leading:1.12; --product-deck-title-size:clamp(3.2rem,5.3vw,6.4rem); --product-deck-title-leading:.94; --product-deck-lead-size:clamp(1rem,1.2vw,1.3rem); --product-prose-h2-size:clamp(1.42rem,1.7vw,1.78rem); --product-prose-h3-size:clamp(1.22rem,1.35vw,1.48rem); --product-prose-h4-size:clamp(1.08rem,1.12vw,1.22rem); --product-prose-minor-size:clamp(1rem,1vw,1.08rem); --product-prose-compact-size:clamp(.98rem,.96vw,1.06rem); --product-prose-compact-leading:1.62; --slider-dot-target:24px; --slider-dot-size:4px; --slider-dot-ink:#fff; --slider-dot-active-ink:#161616; --slider-dots-inset:20px; --slider-dots-radius:99px; --slider-dots-pad:3px 6px; --slider-dots-blur:16px; --slider-dots-saturation:150%; --slider-dots-bg:#ffffff30; --slider-dots-edge:#ffffff38; --slider-dots-shine:#ffffff20; --speed: 240ms; --shadow: 0 12px 40px #1616160a; --download-height:var(--button-height); --download-padding:var(--button-padding); --download-gap: 8px; --download-size:var(--button-size); --download-weight:var(--button-weight); --download-icon-size: 16px; --download-radius:var(--pill); --download-border: 1px solid var(--line); --download-space: 16px; --download-align: center; --toast-bg: color-mix(in srgb, var(--surface) 87%, transparent); --toast-border: #ffffffeb; --toast-accent: var(--accent); --toast-accent-ink: var(--accent-ink); --toast-shadow: #16161629; } @media (min-width:1600px) { :root { --club-calculator-title-size:78px; } } @media (max-width:1100px) { :root { --club-hero-title-size:43px; } } @media (max-width:1050px) { :root { --club-calculator-title-size:50px; } } @media (max-width:760px) { :root { --club-hero-title-size:36px; --club-hero-title-leading:1.06; } } @media (max-width:740px) { :root { --club-calculator-title-size:clamp(34px,10vw,44px); --club-calculator-title-leading:1.12; } } @media (max-width:420px) { :root { --club-hero-title-size:33px; } } @media (max-width:370px) { :root { --club-calculator-title-size:33px; } } @media (max-width:360px) { :root { --club-hero-title-size:31px; } } html[data-theme="dark"] { color-scheme: dark; --bg: #191a17; --surface: #262823; --ink: #f1f1e8; --muted: #acafa3; --paragraph-ink: var(--ink); --line: #3e4238; --header-bg: #191a17; --glass-bg: #232620a8; --glass-edge: #ffffff29; --glass-shine: #ffffff38; --glass-shadow: #00000040; --glass-tint: #ffffff04; --focus: #d2ed89; --error: #f0a293; --toast-bg: #30302fdf; --toast-border: #ffffff30; --toast-shadow: #00000070; } @media (prefers-color-scheme: dark) { html[data-theme="system"] { color-scheme: dark; --bg: #191a17; --surface: #262823; --ink: #f1f1e8; --muted: #acafa3; --paragraph-ink: var(--ink); --line: #3e4238; --header-bg: #191a17; --glass-bg: #232620a8; --glass-edge: #ffffff29; --glass-shine: #ffffff38; --glass-shadow: #00000040; --glass-tint: #ffffff04; --focus: #d2ed89; --error: #f0a293; --toast-bg: #30302fdf; --toast-border: #ffffff30; --toast-shadow: #00000070; } } * { box-sizing: border-box; } :where(*) { scrollbar-width: thin; scrollbar-color: var(--line) transparent; } ::-webkit-scrollbar { width: 3px; height: 3px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* Chromium's keyword scrollbar styling overrides pixel-sized WebKit rules. */ @supports selector(::-webkit-scrollbar) { :where(*) { scrollbar-width: auto; scrollbar-color: auto; } } html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); } html:has(body[data-search-layout="inline"].search-is-open) { scroll-padding-top: 0; } body { margin: 0; background: var(--bg); color: var(--ink); font:var(--font-weight) var(--body-size)/var(--body-leading) var(--body-font); font-optical-sizing: auto; font-synthesis: none; } body[data-dropdown-glass="b"] { --dropdown-bg: color-mix(in srgb, var(--bg) 72%, transparent); --dropdown-blur: 32px; --dropdown-shadow: inset 0 1px 0 var(--glass-shine), 0 20px 48px var(--glass-shadow); } [hidden] { display: none; } a { color: inherit; text-decoration: none !important; transition: opacity var(--speed); } a:hover { opacity: var(--hover-opacity); } button, input, select, textarea { font: inherit; } button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; } button { cursor: pointer; } :focus-visible { outline:none!important; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; box-shadow: none; } .transaction-page .woocommerce-invalid :is(input, textarea, select):focus-visible { outline-color: var(--error); } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, p { margin: 0; } h1, h2 { letter-spacing: -.055em; line-height:var(--page-title-leading); font-weight: var(--font-heading); } h1 { font-size: var(--title); } h2 { font-size:var(--section-title-size); line-height:var(--section-title-leading); } h3 { font-size:var(--panel-title-size); line-height:var(--panel-title-leading); font-weight:var(--font-medium,500); letter-spacing: -.025em; } h4, h5, h6 { margin:0; font-weight:var(--font-heading); line-height:var(--compact-title-leading); letter-spacing:var(--dfvn-title-letter-spacing); } h4 { font-size:var(--compact-title-size); } h5 { font-size:var(--form-section-title-size); } h6 { font-size:var(--notice-title-size); } p { color: var(--paragraph-ink); } .shell { width: min(calc(100% - var(--gutter) * 2), var(--site-width)); padding-inline: 0; margin-inline: auto; } .announcement { min-height: 30px; padding: 7px var(--gutter); background: var(--button-bg); color: var(--button-ink); text-align: center; font-size: var(--type-micro-size); letter-spacing: .08em; } .header-space { height: var(--header-height); position: sticky; top: var(--admin-offset); z-index: 30; pointer-events: none; padding-top: var(--header-offset); } .site-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--gap); width: calc(100% - var(--gutter) * 2); max-width: var(--max); min-height: 76px; padding: 16px 12px; margin: 0 auto; background: var(--header-bg); border: 1px solid transparent; border-radius: var(--pill); pointer-events: auto; transition: max-width var(--speed), padding var(--speed), box-shadow var(--speed), background var(--speed); } body[data-header="shrink"].is-scrolled .site-header { max-width: var(--header-max); padding-inline: 28px; background: var(--glass-bg); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-shine), inset 0 -1px 0 var(--glass-tint), 0 12px 36px var(--glass-shadow); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation)); } .brand { font-size: 2rem; font-weight: var(--font-brand); letter-spacing: -.075em; line-height: 1; } .mobile-nav-utilities, .mobile-nav-arrow { display: none; } .mobile-nav-search[hidden], .header-search-trigger[hidden] { display: none; } .theme-picker { position: relative; } .theme-picker summary { list-style: none; cursor: pointer; border-radius: var(--pill); } .theme-picker summary::-webkit-details-marker { display: none; } .theme-icon { display: inline-flex; align-items: center; width: var(--header-icon-size); height: var(--header-icon-size); } .theme-icon > .dfvn-icon { width: 100%; height: 100%; } .header-search-trigger > .dfvn-icon { width: var(--header-icon-size); height: var(--header-icon-size); } .theme-options { position:absolute; top:calc(100% + 12px); right:0; min-width:210px; padding:8px; border-radius:24px; background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow); z-index:40; } .theme-options button { display:flex; align-items:center; gap:var(--space-3); width:100%; padding:12px; border:0; border-radius:14px; background:transparent; color:var(--ink); text-align:left; font-size:var(--type-body-size); white-space:nowrap; } .theme-options button[aria-pressed="true"] { background: var(--surface); } .theme-check { margin-left: auto; visibility: hidden; } .theme-options button[aria-pressed="true"] .theme-check { visibility: visible; } .nav-list { display: flex; list-style: none; gap: 26px; padding: 0; margin: 0; } .nav-list, .header-actions { font-size: var(--type-body-size); font-weight:var(--font-medium,500); } .header-actions { display: flex; align-items: center; gap: 18px; } .account-link { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; } .account-link .dfvn-icon { width: var(--header-icon-size); height: var(--header-icon-size); } .header-search-trigger { border-radius: var(--pill); font-size: var(--type-emphasis-size); } .header-search-trigger:hover { opacity: var(--hover-opacity); } .header-search-trigger[hidden], .header-search-overlay[hidden] { display: none; } body[data-search-layout="modal"] .header-search-overlay[hidden] { display: none; } .header-search-overlay { position: absolute; top: var(--header-offset); left: 50%; width: calc(100% - var(--gutter) * 2); max-width: var(--max); z-index: 10020; pointer-events: none; transform: translateX(-50%); } body[data-header="shrink"][data-search-layout="inline"].is-scrolled .header-search-overlay { max-width: var(--header-max); } .header-search-panel { position: relative; width: 100%; margin: 0 auto; pointer-events: auto; color: var(--ink); animation: search-appear 180ms ease-out; } @keyframes menu-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes search-appear { from { opacity: 0; transform: translateY(-12px) scale(.99); } to { opacity: 1; transform: none; } } .header-search-top, .header-search-backdrop, .header-search-submit { display: none; } .header-search-submit-short { display: none; } .header-search-form .header-search-close { flex: 0 0 auto; border-radius: var(--pill); background: var(--bg); font-size: 1.55rem; line-height: 1; } .header-search-form { display: flex; align-items: center; gap: 18px; min-height: 76px; padding: 8px 10px 8px 26px; border-radius: var(--pill); background: var(--surface); box-shadow: 0 16px 50px #0002; } .header-search-form:focus-within { box-shadow: 0 16px 50px #0002; } .header-search-form > .dfvn-icon { font-size: 1.35rem; } .header-search-form > .dfvn-search-control { flex: 1 1 0%; width: auto; } .header-search-overlay .header-search-panel .header-search-form input[type="search"] { flex: 1 1 0%; width: 100%; max-width: none; min-width: 0; padding: 12px 0; padding-right: var(--search-clear-space, 48px); border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--ink); font-size: var(--field-size); } .header-search-form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .header-search-content { max-height: min(65vh, 680px); overflow-y: auto; padding: var(--dropdown-padding); margin-top: var(--dropdown-gap); border: 1px solid var(--dropdown-edge); border-radius: var(--dropdown-radius); background: var(--dropdown-bg); box-shadow: var(--dropdown-shadow); backdrop-filter: blur(var(--dropdown-blur)) saturate(var(--dropdown-saturation)); -webkit-backdrop-filter: blur(var(--dropdown-blur)) saturate(var(--dropdown-saturation)); } .header-search-content[hidden] { display: none; } body[data-search-layout="modal"].search-is-open { overflow: hidden; } body[data-search-layout="modal"] .header-search-overlay { position: fixed; inset: 0; display: grid; align-items: start; justify-items: center; width: auto; max-width: none; padding: clamp(82px, 9vh, 128px) 22px 24px; overflow-y: auto; pointer-events: auto; transform: none; } body[data-search-layout="modal"] .header-search-backdrop { position: fixed; inset: 0; display: block; background: #10110db8; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body[data-search-layout="modal"] .header-search-panel { width: min(100%, 1120px); max-height: calc(100dvh - clamp(106px, 11vh, 152px)); overflow-y: auto; padding: clamp(20px, 3vw, 42px); border: 1px solid var(--dropdown-edge); border-radius: clamp(22px, 3vw, 34px); background: var(--dropdown-bg); box-shadow: var(--dropdown-shadow); backdrop-filter: blur(var(--dropdown-blur)) saturate(var(--dropdown-saturation)); -webkit-backdrop-filter: blur(var(--dropdown-blur)) saturate(var(--dropdown-saturation)); } body[data-search-layout="modal"] .header-search-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); } body[data-search-layout="modal"] .header-search-top .eyebrow { color: var(--muted); } body[data-search-layout="modal"] .header-search-top .header-search-close { border-radius: var(--pill); background: var(--surface); font-size: 1.65rem; line-height: 1; } body[data-search-layout="modal"] .header-search-form { background: transparent; box-shadow: none; } body[data-search-layout="modal"] .header-search-form:focus-within { box-shadow: none; } body[data-search-layout="modal"] .header-search-submit { display: block; flex: 0 0 auto; min-height: 56px; padding: 14px 26px; border: 0; border-radius: var(--pill); background: var(--accent); color: var(--accent-ink); font-weight:var(--font-bold,700); } body[data-search-layout="modal"] .header-search-inline-close { display: none; } body[data-search-layout="modal"] .header-search-content { max-height: none; overflow: visible; padding: 26px 0 0; margin: 0; border: 0; border-top: 1px solid var(--search-divider); border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* One glass surface contains the search input and results on every viewport. */ body[data-search-layout="inline"].search-is-open .site-header, body[data-search-layout="inline"].search-is-open[data-header="shrink"].is-scrolled .site-header { padding: 0; border-color: var(--dropdown-edge); background: var(--dropdown-bg); box-shadow: var(--dropdown-shadow); backdrop-filter: blur(var(--dropdown-blur)) saturate(var(--dropdown-saturation)); -webkit-backdrop-filter: blur(var(--dropdown-blur)) saturate(var(--dropdown-saturation)); } body[data-search-layout="inline"].search-is-open .site-header { max-width: var(--max); } body[data-search-layout="inline"].search-has-results .site-header { border-radius: var(--dropdown-radius); overflow: clip; } body[data-search-layout="inline"].search-is-open[data-header="shrink"].is-scrolled .site-header { max-width: var(--header-max); } body[data-search-layout="inline"].search-is-open .site-header > :not(.header-search-overlay) { display: none; } body[data-search-layout="inline"] .site-header > .header-search-overlay, body[data-header="shrink"][data-search-layout="inline"].is-scrolled.search-is-open .site-header > .header-search-overlay { position: static; flex: 1 1 100%; grid-column: 1 / -1; min-width: 0; width: 100%; max-width: none; transform: none; } body[data-search-layout="inline"] .header-search-panel { animation: none; } body[data-search-layout="inline"] .header-search-form, body[data-search-layout="inline"] .header-search-form:focus-within { min-height: var(--search-row-height); padding-left: clamp(18px, 2vw, 30px); background: transparent; box-shadow: none; } body[data-search-layout="inline"] .header-search-content { position: static; width: 100%; max-height: min(var(--search-results-height, 65dvh), var(--search-results-cap)); padding: var(--dropdown-padding); margin: 0; border: 0; border-top: 1px solid var(--search-divider); border-radius: 0 0 var(--dropdown-radius) var(--dropdown-radius); overscroll-behavior: contain; overflow-x: hidden; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .header-search-panel .header-search-content.is-revealing { overflow-y: hidden; } body[data-search-layout="inline"] .header-search-groups { grid-template-columns: 1fr; gap: 30px; margin-top: 18px; } body[data-search-layout="inline"] .header-search-results { gap: 10px; } body[data-search-layout="inline"] .header-search-result { min-height:104px; padding:12px 18px 12px 12px; border-radius:18px; animation:search-result-in var(--search-card-duration) var(--search-motion-ease) both; } .header-search-result__arrow { display: none; } body[data-search-layout="inline"] .header-search-result__arrow { display: grid; place-items: center; flex: 0 0 var(--search-result-arrow-size); width: var(--search-result-arrow-size); height: var(--search-result-arrow-size); margin-left: auto; border-radius: var(--pill); background: var(--bg); color: var(--ink); transition: background var(--speed), color var(--speed); } .header-search-result__arrow .dfvn-icon { width: var(--search-result-icon-size); height: var(--search-result-icon-size); } body[data-search-layout="inline"] .header-search-result:nth-child(2) { animation-delay: 25ms; } body[data-search-layout="inline"] .header-search-result:nth-child(3) { animation-delay: 50ms; } body[data-search-layout="inline"] .header-search-result:nth-child(n+4) { animation-delay: 75ms; } @keyframes search-result-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } body[data-search-layout="inline"] .header-search-result__copy strong { font-size: clamp(1rem, 1.3vw, 1.35rem); } body[data-search-layout="inline"].search-has-results::before { content: ''; position: fixed; inset: 0; z-index: 29; background: #1116; } @media (prefers-reduced-motion: reduce) { body[data-search-layout="inline"] .header-search-content, body[data-search-layout="inline"] .header-search-result, .site-header #primary-nav.is-open { animation: none; } } .header-search-message { padding: 18px 4px 24px; font-size: var(--type-label-size); } .header-search-summary h2 { font-size:var(--dialog-title-size); line-height:var(--dialog-title-leading); } .header-search-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 46px); margin-top: 26px; } .header-search-group:only-child { grid-column: 1 / -1; } .header-search-group-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 44px; margin-bottom: 10px; } .header-search-group h2 { margin: 0; color: var(--muted); font-size: var(--type-small-size); font-weight:var(--font-semibold,600); letter-spacing: .08em; text-transform: uppercase; } .header-search-all { display: inline-flex; align-items: center; justify-content: flex-end; flex-shrink: 0; min-height: 44px; color: var(--muted); font-size: var(--type-small-size); text-underline-offset: 4px; transition: color var(--speed); } .header-search-all:hover, .header-search-all:focus-visible { color: var(--ink); opacity: 1; text-decoration: underline; } .header-search-results { display: grid; gap: var(--space-2); } .header-search-result { display: flex; align-items: center; gap: 15px; min-width: 0; padding: 10px; border-radius: 17px; background: var(--dropdown-card-bg); transition: background var(--speed), translate var(--speed) var(--search-motion-ease); } .header-search-result:focus-visible { background: var(--surface); } .header-search-result__visual { display: grid; place-items: center; flex: 0 0 88px; width: 88px; height: 68px; overflow: hidden; border-radius: 11px; background: var(--bg); font-size: 1.8rem; font-weight:var(--font-bold,700); } .header-search-result__visual img { width: 100%; height: 100%; object-fit: cover; } .header-search-result__copy { display: grid; gap: 5px; min-width: 0; } .header-search-result__copy strong { overflow: hidden; color: var(--ink); font-size: var(--type-answer-size); line-height: 1.25; text-overflow: ellipsis; } .header-search-result__copy small { color: var(--muted); font-size: var(--type-meta-size); } .header-search-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; } .header-search-links a { padding: 10px 16px; border-radius: var(--pill); background: var(--surface); font-size: var(--type-copy-size); font-weight:var(--font-semibold,600); transition: translate var(--speed), opacity var(--speed); } .header-search-links a:hover { opacity: 1; } .header-search-panel .header-search-close { transition: translate var(--speed); } @media (hover: hover) and (pointer: fine) { .header-search-result:hover { translate: var(--search-hover-distance) 0; background: var(--search-hover-bg); opacity: 1; } .header-search-result:hover .header-search-result__arrow { background: var(--button-bg); color: var(--button-ink); } } @media (prefers-reduced-motion: reduce) { .header-search-panel { animation: none; } .header-search-result, .header-search-all, .header-search-links a, .header-search-panel .header-search-close { transition: none; } .header-search-result:hover, .header-search-links a:hover, .header-search-panel .header-search-close:hover { translate: none; } } :is(.button,.studio-button,.btn,.dfvn-btn,.dfvn-service-access-button,.auth-google-button,.dfvn-order-action,.saved-collection-rename,.saved-collection-delete,.dfvn-passkeys-delete,.dfvn-member-file,.help-button,.download-button,.dfvn-action,.library-create>summary,input[type=submit],input[type=button]):not([hidden]) { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; gap:var(--button-icon-gap); min-height:var(--button-height); max-width:100%; padding:var(--button-padding); border:1px solid var(--action-line,transparent); border-radius:var(--pill); background:var(--action-bg,var(--button-bg)); color:var(--action-ink,var(--button-ink)); font:var(--button-weight) var(--button-size)/1.35 var(--body-font); letter-spacing:inherit; text-align:center; text-decoration:none; cursor:pointer; transition:opacity var(--speed); } :is(.button-outline,.button-secondary,.studio-button--outline,.studio-button--soft,.btn.secondary,.btn.light,.home-daily-copy .button) { --action-bg:transparent; --action-ink:var(--ink); --action-line:var(--ink); } :is(.dfvn-action,input[type=submit],input[type=button]):disabled { opacity:.5; cursor:not-allowed; } .button:hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } body[data-button-hover=roll] { --button-hover-opacity:1; } /* Shared rolling labels; CSS copies are decorative and do not duplicate accessible text. */ .dfvn-roll-window { display:inline-block; height:1.45em; line-height:1.45; overflow:hidden; vertical-align:middle; white-space:pre; } .dfvn-roll-text { display:block; position:relative; transition:transform 420ms cubic-bezier(.38,.05,.2,1); } .dfvn-roll-text::after { content:attr(data-roll); position:absolute; top:100%; left:0; width:100%; } .dfvn-button-input { display:inline-grid; position:relative; vertical-align:middle; } .dfvn-button-input>input { grid-area:1/1; } .dfvn-button-input-label { grid-area:1/1; align-self:center; justify-self:center; color:var(--dfvn-input-ink); pointer-events:none; max-width:100%; } body[data-button-hover=roll] .dfvn-button-input>input { color:transparent; text-shadow:none; } body[data-button-hover=roll] .dfvn-button-roll:is(:hover,:focus-visible) { opacity:1; } @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) { body[data-button-hover=roll] :is(.dfvn-button-roll:not(:disabled):not([aria-disabled=true]):not([aria-busy=true]),.dfvn-button-input:not(.is-disabled)):hover .dfvn-roll-text { transform:translateY(-100%); animation:dfvn-button-blur 280ms ease; } } @media(prefers-reduced-motion:no-preference) { body[data-button-hover=roll] .dfvn-button-roll:not(:disabled):not([aria-disabled=true]):not([aria-busy=true]):focus-visible .dfvn-roll-text, body[data-button-hover=roll] .dfvn-button-input:not(.is-disabled):focus-within .dfvn-roll-text { transform:translateY(-100%); } } @keyframes dfvn-button-blur { 0%,100% { filter:blur(0); } 45% { filter:blur(1px); } } @media(prefers-reduced-motion:reduce) { .dfvn-roll-text { transition:none; } body[data-button-hover=roll] :is(.dfvn-button-roll,.dfvn-button-input):is(:hover,:focus-visible,:focus-within) .dfvn-roll-text { transform:none; animation:none; } } .icon-button { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; padding: 6px; border: 0; background: transparent; color: inherit; } .mobile-toggle { display: none; } .mobile-toggle .dfvn-icon { width: var(--header-icon-size); height: var(--header-icon-size); } .mobile-toggle-open, .mobile-toggle-close { display: grid; place-items: center; width: var(--header-icon-size); height: var(--header-icon-size); line-height: 1; } .mobile-toggle-close, .mobile-toggle[aria-expanded="true"] .mobile-toggle-open { display: none; } .mobile-toggle[aria-expanded="true"] .mobile-toggle-close { display: grid; } /* Full-cover pages share the product header's existing states. */ .cover-header .announcement{display:none} .cover-header .header-space{position:absolute;top:var(--admin-offset,0px);left:0;width:100%;height:0;z-index:40} .cover-header:not(.case-header-visible):not(.search-is-open) .site-header:not(.is-menu-open){background:transparent!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:#fff;max-width:var(--max)!important;padding-inline:12px!important} .cover-header:not(.case-header-visible):not(.search-is-open) .site-header:not(.is-menu-open) :is(.brand,.nav-list>li>a,.account-link,.header-cart,.theme-picker,.header-search-trigger){color:#fff} .cover-header.case-header-visible .header-space{position:fixed;top:var(--admin-offset,0px)} .cover-header.case-header-visible .site-header{color:var(--ink)} .hero { position: relative; border-radius:var(--card-radius); overflow: clip; isolation: isolate; background: var(--surface); } .hero-slide { position: relative; min-height: clamp(440px, 43vw, 770px); color: var(--hero-ink); } :is(.home-main,.shop-hero)[data-hero-size="screen"] .hero-slide { min-height: max(520px, calc(100svh - var(--header-height) - 78px)); } .hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(20deg, var(--hero-shade), transparent 65%); z-index: -1; } .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .hero-art-link { position:absolute;inset:0;z-index:0; } .hero-art-link:focus-visible { outline:2px solid var(--hero-ink);outline-offset:-4px; } .hero-slide:has(.hero-art-link) .hero-copy { pointer-events:none; } .hero-slide:has(.hero-art-link) .hero-copy a { pointer-events:auto; } .hero-placeholder { background: radial-gradient(ellipse at 65% 40%, var(--hero-to), var(--hero-from)); z-index: 0; } .hero-copy { --hero-copy-width:530px; --hero-lead-width:370px; --hero-lead-gap:24px; position: absolute; bottom: 8%; left: 4%; width:min(var(--hero-copy-width),85%); } .hero-copy :is(h1, h2) { margin-block:var(--title-lead-gap); font-size:var(--cover-title-size); line-height:var(--cover-title-leading); } .hero-copy p { max-width:var(--hero-lead-width); color: inherit; margin-bottom:var(--hero-lead-gap); } .hero-copy .button.hero-explore { --hero-cta-height:42px; --hero-cta-pad:9px 18px; --hero-cta-size:14px; --hero-cta-gap:14px; --hero-cta-blur:6px; --hero-cta-edge:#ffffffb3; --hero-cta-bg:#f7f7f20c; min-height:var(--hero-cta-height); padding:var(--hero-cta-pad); font-size:var(--hero-cta-size); font-weight:var(--font-semibold,600); gap:var(--hero-cta-gap); border:1px solid var(--hero-cta-edge); background:var(--hero-cta-bg); color:var(--hero-ink); box-shadow:none; translate:none; transform:none; backdrop-filter:blur(var(--hero-cta-blur)); -webkit-backdrop-filter:blur(var(--hero-cta-blur)); transition:opacity var(--speed); } .hero-explore-label { color:inherit; } .hero-explore>.dfvn-icon { --hero-cta-icon-size:16px; width:var(--hero-cta-icon-size); height:var(--hero-cta-icon-size); flex:none; } :is(.home-main,.shop-hero)[data-hero-button-style="glass"] .hero-copy .button.hero-explore { background:#f7f7f2c4; border-color:#ffffffa8; color:#181b16; backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); } .hero-copy .button.hero-explore:focus-visible { outline:2px solid #e0d5ff; outline-offset:3px; } @media(max-width:767px) { .hero-copy .button.hero-explore { min-height:44px; padding:10px 16px; } .hero[data-mobile-image-link="on"] .hero-explore { display:none; } } @media(prefers-reduced-motion:reduce) { .hero-copy .button.hero-explore { transition:none; } } .eyebrow { display: block; font-size: var(--type-micro-size); line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; } .specimen { position: absolute; left: 48%; top: 0; font: italic clamp(220px, 36vw, 650px)/1 var(--display-font); letter-spacing: -.1em; color: var(--accent-ink); transform: rotate(-8deg); } .specimen span { display: block; margin-left: 12%; font:var(--font-medium,500) clamp(18px, 2.3vw, 36px)/1.1 var(--body-font); letter-spacing: -.04em; } .slider-controls { position: absolute; z-index:3; display: flex; align-items: center; gap: var(--space-2); bottom: 30px; right: 30px; color: var(--hero-ink); font-size: var(--small); } .ticker { display: flex; align-items: center; gap: 35px; padding-block: 14px; overflow: clip; border-bottom: 1px solid var(--line); } .ticker > .eyebrow { flex: 0 0 auto; } .ticker-viewport { overflow: hidden; min-width: 0; flex: 1; mask-image: linear-gradient(to right, transparent, var(--ink) 20px, var(--ink) calc(100% - 20px), transparent); } .ticker-track { display: flex; width: max-content; } .ticker-items { display: flex; align-items: center; gap: 36px; flex-shrink: 0; padding-right: 36px; } .ticker-items a { display: inline-flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; white-space: nowrap; font-size: var(--small); } .ticker-marker { display: inline-block; flex: 0 0 auto; } .ticker-marker--sun { width: 18px; height: 18px; } .ticker-marker--dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .ticker-marker--highlight { color:var(--ticker-hot-ink); } .ticker-marker--dot.ticker-marker--highlight { background:var(--ticker-hot-ink); } .intro { display: flex; justify-content: center; align-items: center; gap: 26px; padding-top: var(--space); } .home-main .intro { flex-direction:column; text-align:center; gap:var(--space-4); padding-block:58px 0; } .intro p { font-size: clamp(1.3rem, 2vw, 2rem); color: var(--ink); line-height: 1.08; letter-spacing: -.05em; } .dot-mark { font-size: 5rem; line-height: 1; } .section { padding-block: var(--space); } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--gap); margin-bottom:var(--heading-card-gap); } .home-main .section-heading { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; } .home-main .section-heading .text-link { margin-top: 0; } .section-heading .eyebrow { margin-bottom:var(--eyebrow-title-gap); color: var(--muted); } .text-link { font-size: var(--type-copy-size); } .product-grid, .commerce ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); list-style: none; padding: 0; } .card-art { display: block; aspect-ratio: 1810 / 1213; background: var(--surface); border-radius:var(--card-radius); overflow: hidden; } .card-art img { width: 100%; height: 100%; object-fit: cover; } :is(.card-art,.catalog-art,.journal-card__image,.studio-library-card figure,.home-weekly-art) { position:relative; isolation:isolate; } :is(.card-art,.catalog-art,.journal-card__image,.studio-library-card figure) img { transition:transform 650ms cubic-bezier(.2,.65,.3,1); } :is(.card-art,.catalog-art,.journal-card__image,.studio-library-card figure,.home-weekly-art)::after { content:''; position:absolute; z-index:1; width:110%; height:42%; left:-5%; bottom:-24%; border-radius:50%; background:#ab6bea; filter:blur(38px); opacity:0; pointer-events:none; transition:opacity 650ms ease-out; } @media(hover:hover) and (pointer:fine) { :is(.card-art,.catalog-art,.journal-card__image,.studio-library-card figure,.home-weekly-art):is(:hover,:focus-within), .card-visual:is(:hover,:focus-within) :is(.card-art,.catalog-art,.home-weekly-art) { opacity:1; } :is(.card-art,.catalog-art,.journal-card__image,.studio-library-card figure):is(:hover,:focus-within) img, .card-visual:is(:hover,:focus-within) :is(.card-art,.catalog-art) img { transform:scale(1.05); } :is(.card-art,.catalog-art,.journal-card__image,.studio-library-card figure,.home-weekly-art):is(:hover,:focus-within)::after, .card-visual:is(:hover,:focus-within) :is(.card-art,.catalog-art,.home-weekly-art)::after { opacity:.8; } } @media(prefers-reduced-motion:reduce) { :is(.card-art,.catalog-art,.journal-card__image,.studio-library-card figure) img { transition:none; } :is(.card-art,.catalog-art,.journal-card__image,.studio-library-card figure):is(:hover,:focus-within) img, .card-visual:is(:hover,:focus-within) :is(.card-art,.catalog-art) img { transform:none; } :is(.card-art,.catalog-art,.journal-card__image,.studio-library-card figure,.home-weekly-art)::after { transition:none; } } /* A single product-card component for home, catalogue, related, saved and empty-cart lists. */ .card-meta,.catalog-info,.dfvn-empty-discover__info,.saved-font-info{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:6px 12px;padding:var(--card-meta-space) 0;min-width:0} .card-meta>div,.catalog-info>div{display:contents} .saved-font-info>.saved-font-meta{display:contents}.saved-font-info>.saved-font-title-row{grid-column:1;grid-row:2} :is(.card-meta,.catalog-info,.saved-font-info) .eyebrow{grid-column:1/-1;grid-row:1;color:var(--muted);margin:0;font-size:var(--card-label-size)} :is(.card-meta h3,.catalog-info .woocommerce-loop-product__title,.dfvn-empty-discover__info strong,.saved-font-info h3){grid-column:1;font-family:var(--dfvn-title-font);font-size:var(--card-title-size);font-weight:var(--font-heading);line-height:var(--card-title-leading);letter-spacing:-.025em;overflow-wrap:anywhere;min-width:0} :is(.card-meta,.catalog-info,.saved-font-info) :is(h2,h3),.dfvn-empty-discover__info strong{grid-row:2} :is(.card-meta,.catalog-info,.saved-font-info) .price,.dfvn-empty-discover__info>span{grid-column:2;grid-row:2} :is(.card-meta .price,.catalog-info .price,.saved-font-info .price,.dfvn-empty-discover__info>span){margin:0;padding:0;font-size:var(--card-price-size);font-weight:var(--font-weight);line-height:var(--card-title-leading);color:var(--ink);white-space:nowrap;align-self:start} .price { font-size: var(--card-price-size); white-space: nowrap; } @media(max-width:767px){ :root{ --page-title-size:clamp(40px,11.3vw,48px); --cover-title-size:clamp(1.8rem,7vw,3rem); --feature-poster-title-size:clamp(3.7rem,14vw,5.5rem); --section-title-size:34px; --card-title-size:20px; --card-price-size:var(--type-copy-size); --card-meta-space:16px; --product-price-size:32px; --footer-panel-radius:40px; --lead-size:16px; --card-copy-size:var(--type-copy-size); --page-start-space:var(--space-6); --account-heading-content-gap:var(--space-6); --account-title-lead-gap:var(--space-2); --account-section-title-size:26px; --account-card-title-size:20px; --panel-title-size:22px; --article-title-size:clamp(3rem,11vw,4.7rem); --product-cover-title-size:clamp(34px,8vw,48px); --product-centered-title-size:clamp(40px,12vw,70px); --product-centered-title-leading:1; --product-deck-title-size:clamp(2.35rem,11vw,3.75rem); --product-deck-title-leading:.96; --product-deck-lead-size:var(--type-body-size); } :is(.card-meta,.catalog-info,.saved-font-info,.dfvn-empty-discover__info) .woocommerce-Price-amount{white-space:nowrap} } .price del { color: var(--muted); } .price ins { text-decoration: none; } .section-action { text-align: center; padding-top:var(--heading-card-gap); } .editorial { text-align: center; padding: var(--space) 0; } .editorial h2 { margin:var(--title-lead-gap) auto var(--heading-card-gap); max-width: 1000px; font-size:var(--section-title-size); line-height:var(--section-title-leading); } .editorial em { font-family: var(--display-font); font-weight:var(--font-regular,400); } .error404 .editorial { display:flex; flex-direction:column; align-items:center; gap:var(--space-6); padding-block:clamp(64px,7vw,104px); } .error404 .editorial h1 { max-width:880px; font-size:var(--page-title-size); line-height:var(--page-title-leading); text-wrap:balance; } .error404 .editorial>p { max-width:580px; font-size:var(--product-copy-size); line-height:var(--product-copy-leading); color:var(--muted); } .not-found-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3); margin-top:var(--space-2); } .post-card .eyebrow { margin-block: 20px 12px; color: var(--muted); } .post-card p { margin-top: 10px; font-size: var(--type-copy-size); } .post-placeholder { display: grid; height: 100%; place-items: center; font: italic 8rem/1 var(--display-font); } .site-footer { --footer-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); --footer-grid-gap: clamp(24px, 2.5vw, 40px); --footer-intro-width: 470px; --footer-intro-size: .85rem; --footer-legal-gap: clamp(24px, 3vw, 48px); --footer-legal-space: 28px; --footer-legal-size: .65rem; --footer-logo-space: clamp(44px, 4vw, 72px); --footer-top-space: clamp(40px, 5vw, 72px); --footer-bottom: 24px; --footer-back-space: 40px; --footer-nav-size: .85rem; --footer-nav-gap: 8px; --footer-social-icon-size: 20px; --footer-social-gap: 12px; --footer-social-space: 14px; padding-top: var(--footer-top-space); padding-bottom: var(--footer-bottom); overflow: clip; display: flex; flex-direction: column; } .footer-back { --action-bg:transparent; --action-ink:var(--ink); --button-height:32px; --button-padding:6px 12px; --button-size:.7rem; --pill:10px; --action-line:var(--muted); display: flex; justify-content: flex-end; width: min(100%,var(--site-width)); margin-inline: auto; margin-bottom: var(--footer-back-space); order: 0; } .footer-grid { display: grid; grid-template-columns: var(--footer-columns); gap: var(--footer-grid-gap); align-items: start; width: min(100%,var(--site-width)); margin-inline: auto; order: 1; } .footer-intro { position: relative; max-width: var(--footer-intro-width); } .footer-intro[data-mode="empty"] { padding:0; } .footer-intro p { font-size: var(--footer-intro-size); color: var(--ink); } .footer-contact { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); padding: 11px 16px; font-size: var(--type-meta-size); background: var(--surface); border-radius: 99px; } .footer-art { position: absolute; width: 140px; max-height: 260px; object-fit: contain; left: -30px; top: 0; z-index: -1; } /* Optional footer link sweep, measured from Nudea's footer. */ [data-link-hover=underline] :where(.footer-grid nav a,.footer-policy-links a){position:relative;display:inline-block;text-decoration:none} [data-link-hover=underline] :where(.footer-grid nav a,.footer-policy-links a)::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;background:currentColor;opacity:.5;transition:width .3s ease-in-out;pointer-events:none} [data-link-hover=underline] :where(.footer-grid nav a,.footer-policy-links a):is(:hover,:focus-visible)::after{width:100%} @media(prefers-reduced-motion:reduce){[data-link-hover=underline] :where(.footer-grid nav a,.footer-policy-links a)::after{transition:none}} .footer-grid nav .eyebrow { color: var(--muted); margin-bottom: 18px; font-size: var(--type-micro-size); letter-spacing: .12em; } .footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--footer-nav-gap); font-size: var(--footer-nav-size); } .footer-socials { display: flex; flex-wrap: wrap; gap: var(--footer-social-gap); font-size: var(--footer-nav-size); margin-bottom: var(--footer-social-space); } .footer-note p { font-size: var(--footer-intro-size); } .footer-legal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--footer-legal-gap); width: min(100%,var(--site-width)); margin: var(--footer-legal-space) auto 0; color: var(--muted); font-size: var(--footer-legal-size); order: 4; } .footer-policy-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--footer-legal-gap); } .site-footer[data-legal-layout="above"] .footer-legal { order: 2; } .footer-wordmark { display: block; width: 100%; margin-inline: auto; aspect-ratio: auto; color: var(--ink); margin-top: var(--footer-logo-space); order: 3; } .footer-wordmark svg { display: block; width: 100%; height: 100%; fill: currentColor; overflow: visible; } /* Keep the reveal inside the footer's own stacking context; page layouts remain independent. */ .footer-reveal { position:relative; isolation:isolate; overflow:clip; background:#000; } .footer-reveal[data-background="gradient"] { background:radial-gradient(ellipse at 80% 88%,var(--studio-gradient-warm) 0,transparent 35%),radial-gradient(ellipse at 28% 63%,var(--studio-gradient-main) 0,transparent 44%),radial-gradient(ellipse at 75% 32%,var(--studio-gradient-main) 0,transparent 38%),radial-gradient(ellipse at 46% 92%,var(--studio-gradient-secondary) 0,transparent 44%),var(--studio-gradient-base); } .footer-reveal .site-footer { --footer-bottom:60px; position:relative; z-index:1; width:100%; max-width:none; margin-inline:0; padding-inline:var(--gutter); background:var(--bg); border-radius:0 0 var(--footer-panel-radius) var(--footer-panel-radius); } .footer-reveal .footer-bottom-reveal { position:sticky; z-index:0; bottom:0; padding:40px var(--gutter) 28px; overflow:hidden; } .footer-reveal .footer-legal { justify-content:space-between; gap:12px 28px; margin:24px auto 0; color:#ffffffa6; font-size:var(--type-micro-size); } .footer-reveal .footer-policy-links { justify-content:flex-start; gap:12px 24px; } .footer-reveal .footer-copyright { max-width:100%; white-space:nowrap; } /* Intrinsic height keeps both mobile wordmark rows inside the reveal area. */ .footer-reveal .footer-brand-reveal { height:auto; display:flex; align-items:flex-end; pointer-events:none; } .footer-reveal .footer-brand-reveal .footer-wordmark { --ink:var(--footer-reveal-ink); color:var(--ink); margin:0; width:100%; flex:0 0 auto; } body[data-gradients="off"] .footer-reveal[data-background="gradient"] { background:var(--gradient-flat-bg); } body[data-gradients="off"] .footer-reveal[data-background="gradient"] .footer-wordmark { --ink:var(--gradient-flat-ink); color:var(--gradient-flat-ink); } body[data-gradients="off"] .footer-reveal[data-background="gradient"] .footer-legal { color:var(--gradient-flat-ink); } @media(max-width:767px) { .footer-reveal .footer-bottom-reveal { padding-bottom:24px; }.footer-reveal .footer-legal { flex-wrap:nowrap; gap:var(--space-2); font-size:clamp(.53rem,2.6vw,.65rem); }.footer-reveal .footer-policy-links { flex-wrap:nowrap; gap:var(--space-2); }.footer-reveal .footer-cookie-link { display:none; } } .footer-wordmark-rotor { transform-box: fill-box; transform-origin: center; } .footer-wordmark-o:hover .footer-wordmark-rotor { animation: wordmark-spin 5s linear infinite; } @keyframes wordmark-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .footer-wordmark-o:hover .footer-wordmark-rotor { animation: none; } } .prose { max-width: 900px; } .prose > * + * { margin-top: 26px; } .prose a { overflow-wrap: anywhere; } .prose h2 { font-size:var(--prose-heading-size); line-height:var(--prose-heading-leading); } .prose p { line-height: 1.8; } .prose img { border-radius:var(--card-radius); } .contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 7vw, 120px); max-width:var(--commerce-max); } /* Shared shells fill the viewport with a responsive inset; auth keeps its 16px inset. */ .auth-page { --auth-inset: 16px; --auth-gap: 18px; } .auth-header { display: flex; justify-content: space-between; align-items: center; width: calc(100% - var(--auth-inset) * 2); margin-inline: auto; padding: 24px 0; } .auth-header .header-actions { font-size: var(--type-body-size); } .account-layout { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: var(--auth-gap); width: calc(100% - var(--auth-inset) * 2); margin-inline: auto; padding: 0 0 var(--auth-inset); min-height: calc(100svh - 80px); } .account-art { display: flex; flex-direction: column; justify-content: center; gap: clamp(32px, 5vw, 72px); position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 4vw, 64px); border-radius: 32px; background: var(--surface); } .account-art::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .3; background: radial-gradient(circle, var(--line) 1px, transparent 1px) 0 0 / 18px 18px; } .account-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .14; } .account-specimen { display: grid; place-items: center; padding-block: 32px; } .account-specimen-art { display: block; width: min(100%, clamp(160px, 16vw, 260px)); aspect-ratio: 433.7675 / 429.8164; } .account-brandcopy { width: min(100%, 560px); margin-inline: auto; } .account-brandcopy h2 { max-width: 480px; font-size:var(--auth-brand-title-size); margin-bottom:var(--title-lead-gap); text-wrap:balance; line-height:var(--page-title-leading); } .account-brandcopy p { max-width: 480px; font-size: var(--type-answer-size); } .account-brand-mark { display: block; width: max-content; margin-bottom: 28px; font-size: 1.4rem; font-weight:var(--font-extrabold,800); letter-spacing: -.06em; } .account-brand-mark small { display: block; font-size: var(--type-caption-size); letter-spacing: .09em; font-weight:var(--font-medium,500); } .account-art > .eyebrow { color: var(--muted); } .account-panel { display: grid; align-items: center; padding: 36px clamp(12px, 4vw, 72px); } .account-form { --auth-heading-space:var(--auth-title-lead-gap); --auth-heading-size:var(--auth-title-size); --auth-heading-leading:var(--auth-title-leading); --auth-heading-tracking:var(--dfvn-title-letter-spacing); --auth-button-height: 54px; --auth-button-radius: 12px; width: 100%; max-width: 590px; margin-inline: auto; } .account-form h1 { font-size: var(--auth-heading-size); line-height: var(--auth-heading-leading); letter-spacing: var(--auth-heading-tracking); margin-block: 0 var(--auth-heading-space); } .account-form > p { font-size: var(--type-answer-size); } .account-form form { display:grid; gap:18px; margin-block:var(--space-6); } .auth-field { display: grid; gap: var(--space-2); min-width: 0; } .auth-field-error { display: flex; align-items: flex-start; gap:var(--field-feedback-gap); margin: 0 !important; color: var(--error); font-size:var(--field-error-size) !important; font-weight:var(--font-medium,500); line-height:var(--field-error-leading); } .auth-field-error[hidden] { display: none; } .auth-field-error:not([hidden])::before { content: '!'; display: inline-grid; place-items: center; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; background: var(--error); color: #fff; font-size: var(--type-caption-size); line-height: 1; } .account-form [aria-invalid="true"]:not([type="checkbox"]) { border-color: var(--error) !important; box-shadow: none; } .account-form [aria-invalid="true"]:focus { outline: 2px solid color-mix(in srgb, var(--error) 14%, transparent); outline-offset: 2px; } .auth-honey { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .auth-turnstile { margin-block: 4px; } .auth-google-button { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: var(--space-7); } .auth-google-button[hidden] { display: none; } .auth-google-button:hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } .auth-google-mark { font-size: 1.2rem; line-height: 1; font-weight:var(--font-extrabold,800); background: conic-gradient(#4285f4 0 25%, #34a853 25% 47%, #fbbc05 47% 69%, #ea4335 69% 83%, #4285f4 83%); color: transparent; background-clip: text; -webkit-background-clip: text; } .auth-divider { display: flex; align-items: center; gap: var(--space-3); margin-top: 18px; color: var(--muted); font-size: var(--type-caption-size); font-weight:var(--font-semibold,600); letter-spacing: .18em; white-space: nowrap; } .auth-divider::before, .auth-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); } .auth-fields-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .auth-fields-row > .auth-field { display:grid; grid-template-rows:auto auto; align-content:start; gap:var(--space-2); } .account-form form > label, .auth-field > label, .account-form .field-heading label { font-weight:var(--font-semibold,600); } .account-form form > input:focus, .account-form .password-field input:focus, .auth-fields-row input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 8%, transparent); } .field-heading { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; } .field-heading a { font-size: var(--type-small-size); } .password-field { position: relative; } .password-field .icon-button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--muted); } .password-field input { padding-right: 52px; } .account-form .checkbox { align-items:flex-start; margin-block:0 2px; font-size:var(--type-small-size); color:var(--muted); } .auth-agree .checkbox { margin-block: 6px 0; } .account-form .button-primary { width: 100%; } .auth-trust { display: flex; align-items: center; justify-content: center; gap:var(--space-2); color: var(--muted); font-size:var(--type-meta-size) !important; font-weight:var(--font-semibold,600); letter-spacing: .08em; } .auth-trust span { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 5px #10b9811c; } .auth-switch { text-align: center; } .account-form .auth-legal { margin-top: var(--space-10); font-size: var(--type-caption-size); text-align: center; color: var(--muted); } .account-specimen-art:hover { animation: wordmark-spin 5s linear infinite; } .account-form > .auth-intro { margin-bottom:var(--lead-action-gap); color: var(--paragraph-ink); font-size:var(--type-body-size); line-height:var(--copy-leading); } .account-form .auth-divider { margin-top: var(--space-8); font-weight:var(--font-medium,500); } .auth-input { position: relative; } .auth-input > .dfvn-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; } .account-form .auth-input input:not([type="checkbox"]):not([type="radio"]) { padding-left: 52px; } .account-form .auth-input input:focus { outline: none; border-color: var(--ink); box-shadow: none; } .account-form .auth-input input::placeholder { color: var(--muted); opacity: .7; } .account-form .auth-field > label, .account-form .field-heading label, .account-form .checkbox { font-weight:var(--font-medium,500); } .account-form .field-heading { margin-top: 0; } .account-form .checkbox input { margin-top:2px; margin:0; } .account-form .auth-switch { color:var(--muted); margin-block:var(--space-6); width:100%; text-align:center; } .account-form .auth-trust { margin-top:26px; text-transform:uppercase; } @media (min-width: 801px) { .account-layout[data-auth-layout="left"] { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); } .account-layout[data-auth-layout="left"] .account-panel { grid-column: 1; grid-row: 1; } .account-layout[data-auth-layout="left"] .account-art { grid-column: 2; grid-row: 1; } } @media (prefers-reduced-motion: reduce) { .account-specimen-art:hover { animation: none; } } html[data-theme="dark"] .account-art { background: var(--surface); } :is(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week],input[type=file],textarea,select,.dfvn-select-trigger,:where(.library-search,.shop-search,.journal-search,.help-search,.saved-dialog-search-field,.footer-email-field)) { min-width:0; width:var(--field-control-width,100%); min-height:var(--field-height); padding:var(--field-control-padding,var(--field-padding)); border:1px solid var(--field-line); border-radius:var(--field-radius); background:var(--field-bg); color:var(--ink); font:var(--font-regular,400) var(--field-size)/1.4 var(--body-font); } :is(.library-search,.shop-search,.journal-search,.help-search,.saved-dialog-search-field,.footer-email-field) { --field-control-padding:0 var(--field-padding); } :is(.library-search,.shop-search,.journal-search,.help-search,.saved-dialog-search-field,.footer-email-field) input { min-height:calc(var(--field-height) - 2px); padding:0; border:0; border-radius:inherit; background:transparent; } :is(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week],input[type=file],textarea,select,.dfvn-select-trigger):focus-visible { border-color:var(--ink); } textarea { resize:vertical; } :is(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week],input[type=file],textarea,select,.dfvn-select-trigger)::placeholder { color:var(--muted); opacity:.8; } label { font-size: var(--form-label-size); } .checkbox { display: flex; gap: 10px; } .notice, .woocommerce-message, .woocommerce-info, .woocommerce-error { border: 1px solid var(--line); padding: 20px; border-radius: var(--radius); margin-block: var(--space-6); } .contact-layout h1 { margin-block: var(--space-6); } .contact-layout p { margin-bottom: var(--space-6); } .commerce .woocommerce-breadcrumb { color: var(--muted); margin-bottom: var(--space-6); font-size: var(--small); } .commerce { max-width: var(--max); padding-top: 36px; } .shop-heading { --shop-heading-pad:var(--shop-heading-start-space) 0 var(--page-heading-content-gap); --shop-intro-width:560px; --shop-intro-size:var(--lead-size); text-align: center; padding:var(--shop-heading-pad); } .shop-heading .eyebrow { margin-bottom:var(--eyebrow-title-gap); color: var(--muted); } .shop-heading h1 { font-size:var(--page-title-size); margin-bottom:var(--title-lead-gap); } .shop-heading p { max-width:var(--shop-intro-width); margin-inline: auto; font-size:var(--shop-intro-size); line-height:var(--lead-leading); } /* Catalog review variants compose the existing heading, artwork and card roles. */ .shop-cover { --shop-cover-height:clamp(520px,72svh,900px); --shop-cover-padding:clamp(24px,4vw,64px); --shop-copy-width:600px; position:relative; isolation:isolate; margin-bottom:var(--heading-card-gap); padding:0; overflow:hidden; border-radius:var(--card-radius); } .shop-cover-art,.shop-cover-image-picture { min-width:0; height:100%; } .shop-cover-image { display:block; width:100%; height:100%; object-fit:cover; } .shop-cover-copy { min-width:0; text-align:left; padding:var(--shop-cover-padding); } .shop-cover-copy h1 { margin:var(--title-lead-gap) 0; } .shop-cover-copy p { max-width:var(--shop-copy-width); margin:0 0 var(--heading-card-gap); } .shop-cover-credit { display:flex; align-items:center; gap:var(--button-icon-gap); font-size:var(--small); line-height:var(--lead-leading); } .shop-cover-credit .dfvn-icon,.shop-project-copy .dfvn-icon,.shop-art-rail .dfvn-icon { width:16px; height:16px; flex:none; } :is(.shop-cover--01,.shop-cover--04) { --lead-ink:var(--hero-ink); height:var(--shop-cover-height); border-radius:0; color:var(--hero-ink); } .shop-cover--01 { width:calc(100% + var(--gutter) * 2); margin-inline:calc(var(--gutter) * -1); } :is(.shop-cover--01,.shop-cover--04) .shop-cover-art { position:absolute; inset:0; z-index:-2; } :is(.shop-cover--01,.shop-cover--04):after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#000c,transparent 85%); } :is(.shop-cover--01,.shop-cover--04) .shop-cover-copy { position:absolute; left:0; right:0; bottom:var(--shop-cover-padding); padding-bottom:0; } :is(.shop-cover--01,.shop-cover--04) .eyebrow { color:inherit; } :is(.shop-cover--01,.shop-cover--04) .button { --action-bg:var(--hero-ink); --action-ink:#161616; } :is(.shop-cover--01,.shop-cover--04)>.shop-cover-credit { position:absolute; right:var(--shop-cover-padding); bottom:24px; color:inherit; } .catalog-immersive .commerce { width:100%; max-width:none; margin:0; padding:0; } .shop-cover--04 { --shop-cover-height:100svh; min-height:560px; transform:scale(var(--cover-scale,1)); transform-origin:center; border-radius:var(--cover-radius,0); margin-bottom:var(--card-section-gap); } .shop-cover--04:after { background:linear-gradient(180deg,#0007,transparent 30%),linear-gradient(0deg,#000c,transparent 85%); } .shop-hero { margin-bottom:var(--card-section-gap); } .shop-cover--02 { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; min-height:var(--shop-cover-height); background:var(--surface); } .shop-cover--02 .shop-cover-art { position:absolute; width:54.55%; left:0; top:0; bottom:0; } .shop-cover--02 .shop-cover-copy { grid-column:2; } .shop-cover--02 .shop-cover-credit { margin-top:var(--heading-card-gap); } .shop-cover--03 { overflow:visible; } .shop-cover--03 .shop-cover-copy { text-align:center; padding:var(--heading-card-gap) 0; } .shop-cover--03 .shop-cover-copy p { margin-inline:auto; } .home-font-rail.shop-art-rail { grid-auto-columns:max(300px,46%); gap:var(--card-gap); margin-bottom:var(--heading-card-gap); } .shop-art-rail figure { margin:0; min-width:0; scroll-snap-align:start; } .shop-art-rail figure>a { display:block; aspect-ratio:3/2; overflow:hidden; border-radius:var(--card-radius); background:var(--surface); } .shop-art-rail img { display:block; width:100%; height:100%; object-fit:cover; } .shop-art-rail figcaption { margin-top:var(--card-meta-space); font-size:var(--card-copy-size); } .shop-art-rail figcaption a { display:flex; justify-content:space-between; align-items:center; gap:var(--button-icon-gap); } .shop-discovery { margin-block:var(--card-section-gap); } .shop-discovery .section-heading { margin-bottom:var(--heading-card-gap); } .shop-discovery h2, .shop-list-title { font-size:var(--section-title-size); line-height:var(--section-title-leading); } .shop-project-copy { padding-top:var(--card-meta-space); } .shop-project-copy h3 { font-size:var(--card-title-size); line-height:var(--card-title-leading); } .shop-project-copy p { font-size:var(--card-copy-size); color:var(--lead-ink); margin-block:var(--title-lead-gap); } .shop-project-copy .text-link { display:flex; gap:var(--button-icon-gap); align-items:center; font-size:var(--card-copy-size); } @media(max-width:800px) { .shop-cover { --shop-cover-padding:24px; } .shop-cover:not(.shop-cover--04) { --shop-cover-height:72svh; } .shop-cover--01 { min-height:560px; } :is(.shop-cover--01,.shop-cover--04) .shop-cover-copy { bottom:64px; } :is(.shop-cover--01,.shop-cover--04)>.shop-cover-credit { left:24px; right:24px; bottom:20px; } .shop-cover--02 { grid-template-columns:minmax(0,1fr); } .shop-cover--02 .shop-cover-art { position:static; width:100%; height:auto; aspect-ratio:3/2; } .shop-cover--02 .shop-cover-copy { grid-column:1; } .home-font-rail.shop-art-rail { grid-auto-columns:90%; } } [data-dfvn-shop]:has(.shop-hero) { --shop-tools-gap:var(--card-section-gap); } .shop-tools { --shop-search-space:28px; padding:0 0 var(--shop-tools-gap,var(--shop-search-space)); } .shop-search { --field-radius:var(--pill); --field-control-padding:0 0 0 var(--field-padding); --shop-search-width: 650px; --field-control-width: min(100%, var(--shop-search-width)); display: flex; align-items: center; gap: var(--space-3); width: var(--field-control-width); margin:0 auto var(--shop-search-space); } .shop-search input { --field-control-width: 100%; min-width: 0; } .shop-search button[type="submit"] { --button-height:calc(var(--field-height) - 2px); flex-shrink: 0; } .shop-search svg, .header-cart svg { width: 22px; height: 22px; flex-shrink: 0; } .shop-tools .shop-search input[name="s"]:focus-visible { outline: 0; box-shadow: none; } .shop-search:focus-within { outline: none; } .shop-categories { --category-chip-pad:10px 17px; --category-chip-size:.88rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .shop-categories a { padding:var(--category-chip-pad); border: 0; border-radius: var(--pill); background: var(--surface); font-size:var(--category-chip-size); font-weight:var(--font-medium,500); transition: background var(--speed); } .shop-categories a:hover { opacity: var(--hover-opacity); } .shop-categories a[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--bg); } .shop-results { --shop-results-gap:16px; --shop-results-pad:24px; --shop-results-size:.95rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--shop-results-gap); padding-block:var(--shop-results-pad); font-size:var(--shop-results-size); } .shop-results .woocommerce-notices-wrapper { flex-basis: 100%; } .shop-results .shop-list-title { flex-basis: 100%; text-align: center; } .shop-results .woocommerce-notices-wrapper:empty { display: none; } .commerce .woocommerce-ordering { --field-radius:24px; max-width: 260px; margin: 0; } .commerce ul.products { margin: 0; } .catalog-card { position: relative; min-width: 0; } .catalog-art { display: block; position: relative; aspect-ratio: 1810 / 1213; border-radius:var(--card-radius); background: var(--surface); overflow: hidden; } .catalog-art img { width: 100%; height: 100%; object-fit: contain; } .catalog-badge { position: absolute; top: 14px; left: 14px; padding: 6px 12px; background: var(--bg); border-radius: var(--pill); font-size: var(--small); } .account-menu { --account-panel-width: 280px; --account-panel-offset: 13px; --account-panel-radius: 22px; --account-panel-edge-space: 30px; --account-panel-motion: 180ms; position: relative; } .account-menu-trigger { padding: 9px 12px; border: 0; border-radius: var(--pill); background: transparent; color: var(--ink); font-weight: inherit; } .account-menu[data-open="true"] .account-menu-trigger { background: var(--button-bg); color: var(--button-ink); } .account-menu-panel { position: absolute; top: calc(100% + var(--account-panel-offset)); right: 0; z-index: 80; width: min(var(--account-panel-width), calc(100vw - var(--account-panel-edge-space))); overflow: hidden; border: 1px solid var(--line); border-radius: var(--account-panel-radius); background: var(--bg); box-shadow: var(--shadow); animation: search-appear var(--account-panel-motion) ease-out; } .account-menu-panel[hidden] { display: none; } .account-menu-profile { display: grid; gap: 2px; padding: 20px 22px; border-bottom: 1px solid var(--line); } .account-menu-profile strong { overflow-wrap: anywhere; font-size: var(--type-body-size); line-height: 1.25; } .account-menu-profile .account-menu-name { display:flex; flex-wrap:wrap; align-items:center; gap:9px; } .account-menu-member { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:var(--pill); background:var(--lavender); color:#29253e; font-size:var(--type-micro-size); font-weight:var(--font-semibold,600); white-space:nowrap; } .account-menu-member .dfvn-icon { width:13px; height:13px; } .account-menu-profile > span { overflow-wrap: anywhere; color: var(--muted); font-size: var(--type-small-size); font-weight:var(--font-regular,400); } .account-menu-panel nav { display: grid; gap: 2px; padding: 9px; } .account-menu-panel nav a { display: flex; align-items: center; gap: var(--space-3); min-height: 45px; padding: 9px 12px; border-radius: 12px; font-size: var(--type-answer-size); font-weight: var(--font-medium, 500); } .account-menu-panel nav a:focus-visible { background: var(--surface); } .account-menu-panel nav .dfvn-icon { width: 20px; height: 20px; } .account-menu-panel nav .account-menu-logout { margin-top: 7px; padding-top: 15px; border-top: 1px solid var(--line); border-radius: 0; color: #d3373f; } .account-menu-label { flex:1; } .header-cart { position: relative; border: 0; width: 44px; height: 44px; } .cart-count { position: absolute; top: -4px; right: -5px; display: grid; place-items: center; min-width: 19px; height: 19px; padding-inline: 4px; border-radius: var(--pill); background: var(--button-bg); color: var(--button-ink); font-size: var(--type-micro-size); } .floating-top { position: fixed; bottom: 24px; right: 24px; z-index: 25; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow); visibility: hidden; } .is-scrolled .floating-top { visibility: visible; } .product-page { max-width: var(--site-width); padding-inline: 0; } .product-heading { text-align: center; padding:var(--space-3) var(--gutter) var(--page-heading-content-gap); } .product-heading h1 { font-family: var(--dfvn-title-font); font-size:var(--page-title-size); font-weight: var(--font-heading); line-height:var(--page-title-leading); text-transform: uppercase; overflow-wrap: anywhere; } .product-subtitle { max-width: 680px; margin:var(--title-lead-gap) auto 0; font-size: var(--product-subtitle-size); line-height: var(--lead-leading); } .product-heading > .eyebrow { margin-top: var(--space-5); color: var(--muted); } .dfvn-swipe-surface { touch-action: pan-y pinch-zoom; cursor: grab; } .dfvn-swipe-surface.is-swipe-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; scroll-behavior: auto; } .dfvn-swipe-surface.is-swipe-dragging img { -webkit-user-drag: none; } .product-carousel { --slide-gap: 30px; --gallery-desktop-columns: 7 / 12; --gallery-mobile-width: .88; --gallery-slide-width: calc(var(--gallery-viewport-width, 100vw) * var(--gallery-desktop-columns) - var(--slide-gap)); --gallery-motion-duration: 550ms; --gallery-space-after: 48px; position: relative; width: var(--gallery-viewport-width, 100vw); max-width: none; margin-inline: calc((100% - var(--gallery-viewport-width, 100vw)) / 2); margin-bottom: var(--gallery-space-after); } .product-carousel-window { overflow: hidden; } .product-carousel.is-dragging .product-carousel-window { cursor: grabbing; user-select: none; } .product-carousel.is-dragging .product-carousel-track { transition: none; } .product-carousel.is-dragging img { pointer-events: none; } .product-carousel-track { display: flex; align-items: center; gap: var(--slide-gap); transition: transform var(--gallery-motion-duration) ease; } .product-carousel:not(.has-multiple) .product-carousel-track { justify-content: center; } .product-carousel-slide:not([hidden]) { display: block; flex: 0 0 auto; width: var(--gallery-slide-width); min-width: 0; } .product-carousel-slide img { display: block; width: 100%; height: auto; border-radius:var(--card-radius); } .product-carousel-slide:hover { opacity: 1; } @media (max-width: 800px) { .product-carousel { --slide-gap: 14px; --gallery-slide-width: calc(var(--gallery-viewport-width, 100vw) * var(--gallery-mobile-width)); } } @media (prefers-reduced-motion: reduce) { .product-carousel-track { transition: none; } } .product-carousel-controls { position: absolute; inset: 50% var(--gutter) auto; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; opacity: 0; transition: opacity var(--speed); } .product-carousel:hover .product-carousel-controls, .product-carousel:focus-within .product-carousel-controls { opacity: 1; } .product-carousel-controls button { width: 50px; height: 50px; font-size: 20px; pointer-events: auto; border: 1px solid var(--glass-edge); border-radius: var(--pill); background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); box-shadow: 0 12px 36px var(--glass-shadow); } @media (hover: none) { .product-carousel-controls { opacity: 1; } } .dfvn-toast-layer { position: fixed; inset: 0; z-index: 9999; overflow: clip; contain: paint; pointer-events: none; } .dfvn-toast { --toast-enter-duration: 320ms; --toast-exit-duration: 240ms; --toast-motion-offset: 18px; --toast-motion-ease: cubic-bezier(.22,1,.36,1); pointer-events: auto; opacity: var(--toast-drag-opacity, 1); translate: var(--toast-drag-x, 0px) var(--toast-drag-y, 0px); transition: translate var(--toast-exit-duration) var(--toast-motion-ease), opacity var(--toast-exit-duration) ease, scale var(--toast-exit-duration) ease; } .dfvn-toast.is-toast-dragging { animation: none; transition: none; user-select: none; } .dfvn-toast.is-toast-dragging img { -webkit-user-drag: none; } .dfvn-toast.is-leaving { animation: none; transition: none; opacity: 0; translate: var(--toast-exit-x, 0px) var(--toast-exit-y, var(--toast-motion-offset)); scale: .98; pointer-events: none; } .dfvn-cart-toast { --cart-toast-gap: 12px; --cart-toast-height: 80px; --cart-toast-padding: 9px 14px 9px 9px; --cart-toast-thumb: 52px; --cart-toast-check: 22px; --cart-toast-check-icon: 14px; --cart-toast-copy: .91rem; --cart-toast-action: .9rem; --cart-toast-action-gap: 10px; --cart-toast-action-padding: 18px; --cart-toast-action-icon: 18px; --cart-toast-close: 28px; --cart-toast-thumb-inset: 10px; position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 9999; display: flex; align-items: center; flex-wrap: nowrap; gap: var(--cart-toast-gap); width: min(800px, calc(100vw - 32px)); min-height: var(--cart-toast-height); padding: var(--cart-toast-padding); transform: translateX(-50%); border: 1px solid var(--toast-border); border-radius: var(--pill); background: var(--toast-bg); color: var(--ink); box-shadow: inset 0 1px 0 #ffffffb8, 0 14px 42px var(--toast-shadow); backdrop-filter: blur(40px) saturate(150%); -webkit-backdrop-filter: blur(40px) saturate(150%); } .dfvn-cart-toast__image { width: var(--cart-toast-thumb); height: var(--cart-toast-thumb); flex: 0 0 var(--cart-toast-thumb); object-fit: cover; border-radius: var(--pill); } .dfvn-cart-toast__check { display: grid; place-items: center; width: var(--cart-toast-check); height: var(--cart-toast-check); flex: 0 0 var(--cart-toast-check); border-radius: var(--pill); background: var(--button-bg); color: var(--button-ink); } .dfvn-cart-toast__check .dfvn-icon { width: var(--cart-toast-check-icon); height: var(--cart-toast-check-icon); } .dfvn-cart-toast__copy { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--cart-toast-copy); font-weight:var(--font-semibold,600); line-height: 1.25; } .dfvn-cart-toast__price { flex-shrink: 0; color: var(--muted); } .dfvn-cart-toast__link { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; white-space: nowrap; } .dfvn-cart-toast__link .dfvn-icon { width: var(--cart-toast-action-icon); height: var(--cart-toast-action-icon); } .dfvn-cart-toast__link:hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } .dfvn-cart-toast__close { display: grid; place-items: center; width: var(--cart-toast-close); height: 44px; flex: 0 0 var(--cart-toast-close); padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 24px; line-height: 1; } @media (prefers-reduced-motion: reduce) { .dfvn-toast { transition: none; } .dfvn-toast.is-leaving { scale: 1; } } .dfvn-product :is(.single_add_to_cart_button, .dfvn-buy-now) { --purchase-button-size: 1rem; --purchase-button-weight: 600; font-size: var(--purchase-button-size); font-weight: var(--purchase-button-weight); transition: transform var(--speed), background var(--speed), color var(--speed), box-shadow var(--speed); } .dfvn-product :is(.single_add_to_cart_button, .dfvn-buy-now):hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } .product-reading { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(32px, 4vw, 64px); max-width: var(--site-width); padding-inline: 0; margin: 0 auto; align-items: start; } .product-side { display: grid; gap: var(--card-gap); min-width: 0; position: sticky; top: calc(var(--admin-offset) + var(--header-height)); } :is(.product-description,.woocommerce-product-details__short-description){font-size:var(--product-copy-size);line-height:var(--product-copy-leading)} .product-description { min-width: 0; overflow-wrap: anywhere; } .product-description p { margin-bottom: var(--product-paragraph-space); } .product-description h2 { font-size: var(--product-section-size); line-height:var(--prose-heading-leading); letter-spacing: -.04em; margin-block:var(--product-heading-space) var(--prose-heading-copy-gap); } .product-description :is(ul,ol) { padding-left:var(--space-6); margin-block:var(--prose-list-gap); } .product-description li { margin-bottom:var(--prose-list-item-gap); } .single-product .product-description table { display:block; max-width:100%; overflow-x:auto; font-size:var(--prose-table-size); line-height:var(--prose-table-leading); } .single-product .product-description :is(th,td) { padding:var(--prose-table-cell-space); text-align:left; vertical-align:top; border-bottom:1px solid var(--line); } .single-product .product-description caption { color:var(--muted); font-size:var(--prose-table-caption-size); line-height:var(--prose-caption-leading); text-align:left; } .product-description :is(img, video) { max-width: 100%; height: auto; border-radius:var(--card-radius); } .product-description :is(iframe, .wp-video, .wp-block-embed, .fluid-width-video-wrapper) { display: block; width: 100%; max-width: 100%; } .product-description iframe { aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 16px; } .product-description :is(figure, .wp-caption) { max-width: 100%; margin-inline: 0; } .dfvn-product .summary { --purchase-price-size: var(--product-price-size); --purchase-price-space: 10px; --purchase-padding: 26px; --purchase-section-space: 20px; --purchase-action-gap: 12px; --purchase-license-gap: clamp(6px, 1vw, 12px); --purchase-license-title-size: clamp(.56rem, 2vw, .65rem); --purchase-license-link-size: clamp(.62rem, 2.4vw, .75rem); container-type: inline-size; min-width: 0; padding: var(--purchase-padding); background: var(--surface); border-radius:var(--card-radius); } .summary .product-license { display: flex; align-items: center; justify-content: space-between; gap: var(--purchase-license-gap); padding-bottom: var(--purchase-section-space); border-bottom: 0; } .summary .product-license .eyebrow { font-size: var(--purchase-license-title-size); white-space: nowrap; } .summary .product-license a { flex-shrink: 0; font-size: var(--purchase-license-link-size); color: var(--muted); white-space: nowrap; } .product-license-note { padding-top: 20px; margin-top: var(--space-5); border-top: 1px solid var(--line); font-size: var(--type-meta-size); text-align: center; } .product-support { display: flex; align-items: center; gap: 18px; width: 100%; min-height: 88px; padding: 18px 22px; margin: var(--space) auto 0; background: var(--surface); border-radius:var(--card-radius); } .product-support > .dfvn-icon { width: 34px; height: 34px; flex: 0 0 34px; } .product-support > div { flex: 1; min-width: 0; } .product-support h2 { font-size:var(--compact-title-size); white-space: nowrap; line-height:var(--compact-title-leading); } .product-support p { margin-top:var(--account-row-title-copy-gap); font-size:var(--type-small-size); line-height:var(--copy-leading); } .product-support .button { flex-shrink: 0; } .product-specs { padding: 22px 24px; border-radius:var(--card-radius); background: var(--surface); } .product-specs h2 { margin-bottom:var(--card-title-copy-gap); font-size:var(--notice-title-size); letter-spacing: -.02em; } .product-specs dl { display: grid; gap: 0; margin: 0; } .product-specs dl > div { display: grid; grid-template-columns: 43% 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--type-meta-size); line-height: 1.45; } .product-specs dt { color: var(--muted); }.product-specs dd { margin:0; overflow-wrap:anywhere; text-align:right; } .product-save-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin-top: 14px; overflow: hidden; border-radius: var(--pill); background: color-mix(in srgb, var(--ink) 5%, var(--surface)); } .product-save-actions .product-save-button { width: 100%; min-height: 46px; padding: 10px 8px; border: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: var(--type-small-size); font-weight:var(--font-medium,500); white-space: nowrap; } .product-save-actions .product-save-button + .product-save-button { position: relative; } .product-save-actions .product-save-button + .product-save-button::before { position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: var(--line); content: ''; } .product-save-actions .product-save-button.is-saved { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); transform: none; } .product-save-actions .dfvn-icon { width: 1.25em; height: 1.25em; } .product-save-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--bg); color: var(--ink); font-size: var(--type-meta-size); font-weight:var(--font-semibold,600); transition: background var(--speed), transform var(--speed); } .product-save-button:hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } .catalog-save-actions { position: absolute; right: var(--card-tool-inset,12px); top: var(--card-tool-inset,12px); z-index: 2; display: flex; gap: 6px; } .product-card { position: relative; } .catalog-save-actions .product-save-button { width: 38px; height: 38px; min-height: 38px; padding: 8px; background: var(--glass-bg); border-color: var(--glass-edge); backdrop-filter: blur(16px); } .saved-notice { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 9998; display: flex; align-items: center; gap: var(--space-3); width: max-content; max-width: min(520px, calc(100vw - max(20px, env(safe-area-inset-right)) - max(16px, env(safe-area-inset-left)))); min-height: 64px; padding: 10px 14px; border: 1px solid var(--toast-border); border-radius: var(--pill); background: var(--toast-bg); box-shadow: inset 0 1px 0 #ffffffb8, 0 14px 42px var(--toast-shadow); backdrop-filter: blur(40px) saturate(150%); -webkit-backdrop-filter: blur(40px) saturate(150%); font-size: var(--type-copy-size); font-weight:var(--font-semibold,600); } .saved-notice__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--button-bg); color: var(--button-ink); } .saved-notice__icon .dfvn-icon { width: 18px; height: 18px; } .saved-notice__copy { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.4; } .saved-notice__close { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 23px; line-height: 1; } .saved-dialog { --saved-width: 1080px; --saved-inset: 20px; --saved-height: 760px; --saved-pad: 32px; --saved-radius: 28px; --saved-gap: 32px; --saved-preview-width: minmax(0, .9fr); --saved-content-width: minmax(0, 1.1fr); --saved-preview-pad: 24px; --saved-art-height: 290px; --saved-title-size: var(--dialog-title-size); --saved-product-size: 1.35rem; --saved-text-size: var(--type-answer-size); --saved-small-size: var(--type-small-size); --saved-leading: 1.45; --saved-tight: var(--dialog-title-leading); --saved-row-gap: 12px; --saved-row-pad: 16px; --saved-row-radius: 16px; --saved-field-height: 50px; --saved-control-size: 42px; --saved-list-height: 290px; --saved-list-min: 94px; --saved-row-height: 76px; --saved-action-width: 80px; --saved-action-height: 44px; --saved-icon-size: 22px; --saved-status-space: 14px; --saved-inner-gap: 4px; --saved-control-pad: 10px; --saved-disabled: .6; --saved-row-bg: var(--surface); --saved-row-hover: color-mix(in srgb, var(--surface) 92%, var(--ink)); --saved-row-selected: color-mix(in srgb, var(--surface) 96%, var(--ink)); --saved-shadow: 0 30px 90px #0003; --saved-backdrop: #12121270; --saved-blur: 12px; position: fixed; width: min(var(--saved-width), calc(100vw - var(--saved-inset) * 2)); max-height: min(var(--saved-height), calc(100dvh - var(--saved-inset) * 2)); padding: var(--saved-pad); border: 1px solid var(--line); border-radius: var(--saved-radius); background: var(--bg); color: var(--ink); box-shadow: var(--saved-shadow); overflow: auto; overscroll-behavior: contain; } /* Optional project-card picker. The current picker remains the default. */ .saved-dialog[data-layout="b"] { --saved-width: 960px; --saved-pad: 28px; --saved-gap: 28px; --saved-preview-width: minmax(0, .7fr); --saved-content-width: minmax(0, 1fr); --saved-art-height: 340px; --saved-preview-pad: 16px; --saved-row-height: 190px; --saved-list-height: 400px; --saved-action-height: 32px; --saved-action-width: 62px; --saved-card-columns: 2; --saved-card-pad: 16px; --saved-card-title: 1rem; --saved-monogram-size: 1.8rem; --saved-monogram-height: 42px; } .saved-dialog[data-layout="b"] .saved-dialog-list { grid-template-columns: repeat(var(--saved-card-columns), minmax(0, 1fr)); } .saved-dialog[data-layout="b"] .saved-dialog-empty { grid-column: 1 / -1; } .saved-dialog[data-layout="b"] .saved-dialog-row { display: flex; flex-direction: column; align-items: start; justify-content: space-between; padding: var(--saved-card-pad); } .saved-dialog[data-layout="b"] .saved-dialog-copy strong { font-size: var(--saved-card-title); } .saved-dialog[data-layout="b"] .saved-dialog-folder { display: flex; align-items: center; height: var(--saved-monogram-height); font-family: var(--dfvn-title-font); font-size: var(--saved-monogram-size); color: var(--ink); } .saved-dialog[data-layout="b"] .saved-dialog-mark { align-self: flex-end; } .saved-dialog::backdrop { background: var(--saved-backdrop); backdrop-filter: blur(var(--saved-blur)); } .saved-dialog-close { position: absolute; right: var(--saved-inset); top: var(--saved-inset); display: grid; place-items: center; width: var(--saved-control-size); height: var(--saved-control-size); padding: var(--saved-control-pad); border: 0; border-radius: var(--pill); background: var(--surface); color: var(--ink); } .saved-dialog-close .dfvn-icon, .saved-dialog-close svg { width: 100%; height: 100%; } .saved-dialog-layout { display: grid; grid-template-columns: var(--saved-preview-width) var(--saved-content-width); gap: var(--saved-gap); } .saved-dialog-preview { align-self: start; display: grid; gap: var(--saved-row-gap); padding: var(--saved-preview-pad); border-radius: var(--saved-row-radius); background: var(--surface); } .saved-dialog-art { display: grid; place-items: center; height: var(--saved-art-height); overflow: hidden; border-radius: var(--saved-row-radius); } .saved-dialog-art img { width: 100%; height: 100%; object-fit: cover; } .saved-dialog-art > [hidden] { display: none; } .saved-dialog-art > span { width: 44%; } .saved-dialog-art .dfvn-icon, .saved-dialog-art svg { width: 100%; height: auto; } .saved-dialog-preview > strong { font-family: var(--dfvn-title-font, var(--display-font)); font-size: var(--saved-product-size); line-height: var(--saved-leading); overflow-wrap: anywhere; } .saved-dialog-preview > span { color: var(--muted); font-size: var(--saved-small-size); } .saved-dialog-content { min-width: 0; } .saved-dialog-head { padding-right: var(--saved-control-size); margin-bottom: var(--saved-gap); } .saved-dialog-head h2 { margin: 0; font-size: var(--saved-title-size); line-height: var(--saved-tight); } .saved-dialog-head p { font-size: var(--saved-text-size); line-height: var(--saved-leading); } .saved-dialog-section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--saved-row-gap); margin-bottom: var(--saved-row-gap); min-height: var(--saved-control-size); } .saved-dialog-section-head > strong { font-size: var(--saved-text-size); font-weight: var(--font-weight); } .saved-dialog-search-field { flex: 1; min-width: 0; } .saved-dialog-search-field[hidden], .saved-dialog-section-head > strong[hidden] { display: none; } .saved-dialog-search-field input[type="search"] { width: 100%; min-width: 0; } .saved-dialog-search-toggle { display: grid; place-items: center; flex-shrink: 0; width: var(--saved-control-size); height: var(--saved-control-size); padding: var(--saved-control-pad); border: 0; border-radius: var(--pill); background: transparent; color: var(--muted); } .saved-dialog-search-toggle[aria-expanded="true"] { background: var(--surface); color: var(--ink); } .saved-dialog-search-toggle .dfvn-icon { width: var(--saved-icon-size); height: var(--saved-icon-size); } .saved-dialog-list { display: grid; align-content: start; gap: var(--saved-row-gap); min-height: var(--saved-list-min); max-height: var(--saved-list-height); overflow-y: auto; overscroll-behavior: contain; padding: var(--saved-inner-gap); margin: calc(-1 * var(--saved-inner-gap)); scrollbar-gutter: stable; font-size: var(--saved-text-size); } .saved-dialog-empty { display: grid; align-content: center; padding: var(--saved-row-pad); border: 1px dashed var(--line); border-radius: var(--saved-row-radius); } .saved-dialog-empty p { font-size: var(--saved-text-size); line-height: var(--saved-leading); color: var(--muted); } .saved-dialog-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--saved-row-gap); width: 100%; min-height: var(--saved-row-height); padding: var(--saved-row-pad); border: 0; border-radius: var(--saved-row-radius); background: var(--saved-row-bg); color: var(--ink); text-align: left; transition: background var(--speed); } .saved-dialog-row[aria-pressed="true"] { background: var(--saved-row-selected); } .saved-dialog-row:hover { background: var(--saved-row-hover); } .saved-dialog-row:focus-visible { outline: 0; background: var(--saved-row-hover); text-decoration: underline; text-underline-offset: var(--saved-inner-gap); } .saved-dialog-row[aria-pressed="true"] .saved-dialog-folder { color: var(--ink); } .saved-dialog-row:disabled { cursor: progress; opacity: var(--saved-disabled); } .saved-dialog-folder { display: inline-flex; color: var(--muted); } .saved-dialog-folder .dfvn-icon { width: var(--saved-icon-size); height: var(--saved-icon-size); } .saved-dialog-copy { min-width: 0; display: grid; gap: var(--saved-inner-gap); } .saved-dialog-copy strong { font-size: var(--saved-text-size); line-height: var(--saved-leading); overflow-wrap: anywhere; } .saved-dialog-copy small { color: var(--muted); font-size: var(--saved-small-size); } .saved-dialog-mark { display: inline-flex; align-items: center; justify-content: center; gap: var(--saved-inner-gap); min-width: var(--saved-action-width); min-height: var(--saved-action-height); padding: var(--saved-control-pad); border-radius: var(--saved-row-radius); background: var(--button-bg); color: var(--button-ink); font-size: var(--saved-small-size); white-space: nowrap; } .saved-dialog-row[aria-pressed="true"] .saved-dialog-mark { background: transparent; color: var(--ink); } .saved-dialog-mark .dfvn-icon { width: var(--saved-small-size); height: var(--saved-small-size); } .saved-dialog form { margin-top: var(--saved-gap); padding-top: var(--saved-preview-pad); border-top: 1px dashed var(--line); } .saved-dialog form label { display: block; margin-bottom: var(--saved-row-gap); font-size: var(--form-label-size); } .saved-dialog form > div { display: flex; gap: var(--saved-row-gap); } .saved-dialog form input { flex: 1; min-width: 0; } .saved-dialog form .button { flex-shrink: 0; } .saved-dialog form .button:disabled { opacity: var(--saved-disabled); cursor: progress; } .saved-dialog-status { margin-top: var(--saved-status-space); font-size: var(--saved-small-size); line-height: var(--saved-leading); overflow-wrap: anywhere; } .saved-dialog-status:empty { display: none; } @media (max-width: 700px) { .saved-dialog { --saved-inset: 12px; --saved-pad: 20px; --saved-gap: 20px; --saved-list-height: 32dvh; --saved-preview-pad: 12px; --saved-art-height: 64px; --saved-title-size: var(--dialog-title-size); --saved-product-size: 1rem; --saved-preview-width: minmax(0, 1fr); --saved-row-pad: 12px; --saved-action-width: 62px; --saved-row-height: 68px; --saved-text-size: var(--type-copy-size); --saved-control-size: 40px; } .saved-dialog-layout { grid-template-columns: minmax(0, 1fr); } .saved-dialog-preview { grid-template-columns: var(--saved-art-height) minmax(0, 1fr); align-items: center; padding-right: calc(var(--saved-control-size) + var(--saved-preview-pad)); } .saved-dialog-preview > span { display: none; } .saved-dialog-head { padding-right: 0; } .saved-dialog-folder { display: none; } .saved-dialog-row { grid-template-columns: minmax(0, 1fr) auto; } } @media (max-width: 700px) { .saved-dialog[data-layout="b"] { --saved-pad: 20px; --saved-gap: 20px; --saved-preview-pad: 12px; --saved-art-height: 64px; --saved-row-height: 176px; --saved-list-height: 32dvh; --saved-card-pad: 12px; --saved-card-title: .9rem; --saved-action-width: 56px; --saved-monogram-size: 1.5rem; --saved-monogram-height: 32px; } } /* A compact ownership row shares the purchase panel without another outlined card. */ .product-owned-note { --owned-gap:12px; --owned-pad:14px; --owned-radius:14px; --owned-icon:22px; --owned-title:14px; --owned-link:13px; --owned-space:20px; --owned-arrow:18px; --owned-copy-gap:3px; --owned-bg:color-mix(in srgb,var(--lavender,#ddd6fc) 84%,transparent); margin-bottom:var(--owned-space); } .product-owned-note > a { display:grid; grid-template-columns:var(--owned-icon) minmax(0,1fr) var(--owned-arrow); align-items:center; gap:var(--owned-gap); padding:var(--owned-pad); border-radius:var(--owned-radius); background:var(--owned-bg); color:var(--ink); text-decoration:none; transition:background 180ms ease; } .product-owned-note > a:hover { background:var(--bg); } .product-owned-note > a > .dfvn-icon { width:var(--owned-icon); height:var(--owned-icon); } .product-owned-note > a > .icon-small-right { width:var(--owned-arrow); height:var(--owned-arrow); } .product-owned-copy { min-width:0; display:grid; gap:var(--owned-copy-gap); line-height:1.45; } .product-owned-copy strong { font-size:var(--owned-title); font-weight:var(--font-medium,500); } .product-owned-copy > span { font-size:var(--owned-link); color:var(--muted); } .saved-tabs { --saved-tab-space: 24px; --saved-tab-padding: 10px 18px; --saved-tab-radius: 99px; --saved-tab-size: .85rem; --saved-tab-gap: 8px; } .saved-tab-list { display: flex; gap: var(--saved-tab-gap); margin-bottom: var(--saved-tab-space); flex-wrap: wrap; } .saved-tab-list button { display: inline-flex; align-items: center; gap: var(--saved-tab-gap); padding: var(--saved-tab-padding); border: 1px solid var(--line); border-radius: var(--saved-tab-radius); background: transparent; color: var(--ink); font-size: var(--saved-tab-size); } .saved-tab-list button[aria-selected="true"] { background: var(--button-bg); color: var(--button-ink); border-color: var(--button-bg); } .saved-tab-list button span { opacity: .65; } .saved-tabs [hidden] { display: none; } .saved-account-page { min-width: 0; } .saved-account-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: 22px; } .saved-account-heading h2 { margin-top:var(--account-title-lead-gap); font-size:var(--account-section-title-size); line-height:var(--account-section-title-leading); } .saved-empty { display: grid; justify-items: center; gap: var(--space-3); padding: clamp(40px, 7vw, 76px) 24px; border-radius:var(--card-radius); background: var(--surface); text-align: center; } .saved-empty > .dfvn-icon { width: 36px; height: 36px; margin-bottom: 6px; } .saved-empty h3 { font-size:var(--account-card-title-size); line-height:var(--account-card-title-leading); } .saved-empty p { max-width: 420px; color: var(--paragraph-ink); font-size: var(--type-copy-size); } .saved-empty .button { margin-top: 10px; } .saved-font-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); } .saved-font-card { min-width: 0; } .saved-font-media { position: relative; } .saved-font-media > a { display: block; } .saved-font-card img { width: 100%; aspect-ratio: 1810 / 1213; object-fit: cover; border-radius:var(--card-radius); } .saved-font-tools { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; } .saved-font-tools .product-save-button { width: 36px; height: 36px; min-height: 36px; padding: 7px; border-color: var(--glass-edge); background: var(--glass-bg); backdrop-filter: blur(12px); } .saved-font-meta { display: flex; flex-wrap: wrap; min-width: 0; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .saved-collection-create { display: grid; gap: 18px; padding: 24px; margin-bottom: var(--space-6); border-radius:var(--card-radius); background: var(--surface); } .saved-collection-create label { display: block; margin-bottom: var(--space-2); font-size: var(--form-label-size); font-weight:var(--font-semibold,600); } .saved-collection-create p:not([data-save-status]) { color: var(--muted); font-size: var(--type-small-size); } .saved-collection-create .saved-collection-create-fields { display: flex; gap: 10px; } .saved-collection-create input { flex: 1; min-width: 0; } .saved-collection-create [data-save-status] { font-size: var(--type-small-size); } .saved-collection-create [data-save-status]:empty { display: none; } .saved-collections { display: grid; gap: var(--card-gap); } .saved-collection { --collection-pad: 24px; --collection-radius: 24px; --collection-gap: 12px; --collection-space: 20px; --collection-title: var(--account-card-title-size); --collection-title-space: 5px; --collection-action: .78rem; --collection-control: 44px; --collection-control-pad: 8px 12px; --collection-icon: 14px; --collection-leading: 1.5; --collection-disabled: .55; padding: var(--collection-pad); background: var(--surface); border-radius: var(--collection-radius); } .saved-collection > header { display: flex; justify-content: space-between; align-items: start; gap: var(--collection-gap); margin-bottom: var(--collection-space); } .saved-collection-heading { min-width: 0; } .saved-collection-heading h3 { margin-top: var(--collection-title-space); font-size: var(--collection-title); overflow-wrap: anywhere; } .saved-collection-actions { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: var(--collection-title-space); } .saved-collection-rename-form { margin-bottom: var(--collection-space); } .saved-collection-rename-form[hidden], .saved-collection [hidden] { display: none; } .saved-collection-rename-form label { display: block; margin-bottom: var(--collection-gap); font-size: var(--form-label-size); } .saved-collection-rename-form > div { display: flex; flex-wrap: wrap; gap: var(--collection-gap); } .saved-collection-rename-form input { flex: 1 1 160px; min-width: 0; } .saved-collection-status { margin-bottom: var(--collection-space); font-size: var(--collection-action); line-height: var(--collection-leading); overflow-wrap: anywhere; } .saved-collection-status:empty { display: none; } .saved-collection-remove { display: inline-flex; align-items: center; justify-self: start; gap: var(--collection-title-space); min-height: var(--collection-control); padding: 0; border: 0; background: transparent; color: var(--muted); font-size: var(--collection-action); } .saved-collection-remove .dfvn-icon { width: var(--collection-icon); height: var(--collection-icon); } .saved-collection-remove:hover { color: var(--ink); } .saved-font-unavailable { display: grid; align-content: space-between; gap: var(--collection-space); padding: var(--collection-pad); border: 1px dashed var(--line); border-radius: var(--collection-radius); background: var(--bg); } .saved-font-unavailable p { margin-top: var(--collection-gap); color: var(--muted); font-size: var(--collection-action); } .saved-collection button:disabled { cursor: progress; opacity: var(--collection-disabled); } .saved-collection .customer-empty { background: var(--bg); } @media (max-width: 700px) { .saved-collection { --collection-pad: 16px; --collection-title: var(--account-card-title-size); } .saved-collection > header { flex-direction: column; } } .dfvn-product .summary .price { font-size: var(--purchase-price-size); margin-top: var(--purchase-price-space); color: var(--ink); font-weight:var(--font-semibold,600); white-space: normal; } .dfvn-product .summary .price .woocommerce-Price-amount { white-space: nowrap; } .product-contact { --contact-title: var(--compact-title-size); --contact-copy: var(--type-copy-size); --contact-gap: var(--card-title-copy-gap); --contact-height: 50px; --contact-radius: 12px; --contact-pad: 18px; --contact-note: var(--type-small-size); --contact-disabled: .58; --contact-leading: 1.6; --contact-tight: var(--compact-title-leading); --contact-underline: .2em; margin-top: var(--purchase-section-space, 20px); } .product-contact h3 { font-size: var(--contact-title); line-height: var(--contact-tight); margin-bottom: var(--contact-gap); } .product-contact p { font-size: var(--contact-copy); line-height: var(--contact-leading); color: var(--paragraph-ink, var(--ink)); } .product-contact-button { display: flex; justify-content: space-between; gap: var(--contact-gap); width: 100%; min-height: var(--contact-height); margin-top: var(--contact-gap); padding-inline: var(--contact-pad); border-radius: var(--contact-radius); background: var(--button-bg); color: var(--button-ink); } .product-contact-button:disabled { justify-content: center; opacity: var(--contact-disabled); cursor: default; } .product-contact-login { display: block; margin-top: var(--contact-gap); font-size: var(--contact-note); text-decoration: underline; text-underline-offset: var(--contact-underline); } .dfvn-product .woocommerce-product-details__short-description { margin-top: var(--space-5); } .dfvn-product form.cart { display: flex; flex-wrap: wrap; gap: var(--purchase-action-gap); padding-top: var(--purchase-section-space); } .dfvn-product .quantity { width: 78px; flex-shrink: 0; } .dfvn-product .quantity:has(input[type="hidden"]) { display: none; } .dfvn-product .quantity .qty { height: 50px; text-align: center; } .dfvn-product .single_add_to_cart_button { flex: 1 0 100%; min-height: 56px; background: var(--button-bg); color: var(--button-ink); border-color: var(--ink); border-radius: 12px; } .dfvn-product .single_add_to_cart_button.is-in-cart { background: var(--bg); color: var(--ink); border-color: var(--line); } .dfvn-product .dfvn-buy-now { width: 100%; min-height: 56px; border-radius: 12px; background: transparent; border-color: var(--ink); } .dfvn-product .product_meta { display: grid; gap: 10px; margin-top: var(--space-6); font-size: var(--type-small-size); color: var(--muted); } .dfvn-product .product_meta a { color: var(--ink); } .dfvn-product .variations, .dfvn-product .single_variation_wrap { width: 100%; } .dfvn-product .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: var(--purchase-action-gap); margin-top: 0; } .product-help { display: flex; gap: 14px; margin-top: var(--space-7); padding-top: 24px; border-top: 1px solid var(--line); } .product-help p { font-size: var(--type-small-size); } .product-help a { display: block; margin-top: var(--space-2); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; } .product-details { max-width: var(--max); padding-inline: 0; margin-inline: auto; } .commerce .woocommerce-tabs { margin: 0; } .commerce .related, .commerce .upsells { margin-top: var(--space); } .commerce .related > h2, .commerce .upsells > h2 { margin-bottom:var(--heading-card-gap); font-size:var(--section-title-size); line-height:var(--section-title-leading); } .commerce .tabs { display: flex; list-style: none; padding: 0; gap: var(--space-7); border-bottom: 1px solid var(--line); margin-bottom: var(--space-8); } .commerce .tabs li { padding-block: 16px; color: var(--muted); } .commerce .tabs .active { color: var(--ink); border-bottom: 2px solid var(--ink); } .commerce .woocommerce-Tabs-panel { line-height: 1.8; } .commerce .woocommerce-Tabs-panel > h2 { font-size:var(--prose-heading-size); margin-bottom:var(--prose-heading-copy-gap); } .commerce .woocommerce-Tabs-panel p + p { margin-top: 18px; } .commerce table, .woocommerce table { width:100%; border-collapse:collapse; font-size:var(--commerce-table-size); line-height:var(--commerce-table-leading); } .commerce td, .commerce th, .woocommerce td, .woocommerce th { padding: 16px; text-align: left; border-bottom: 1px solid var(--line); } .woocommerce form .form-row { margin-block: 18px; } .woocommerce-pagination ul { display: flex; justify-content: center; align-items: center; width: max-content; max-width: 100%; gap: 4px; padding: 6px; margin: 32px auto 0; border: 0; border-radius: var(--pill); background: var(--surface); list-style: none; } .woocommerce-pagination ul li { border: 0; } .woocommerce-pagination .page-numbers:not(ul) { display: grid; place-items: center; min-width: 46px; min-height: 46px; padding: 8px 13px; border: 0; border-radius: var(--pill); background: transparent; font-size: var(--type-label-size); font-weight:var(--font-semibold,600); } .woocommerce-pagination .page-numbers.current { background: var(--button-bg); color: var(--button-ink); } .onsale { display: inline-block; padding: 5px 12px; border-radius: var(--pill); background: var(--accent); color: var(--accent-ink); font-size: var(--small); } .transaction-page { max-width: var(--site-width); padding-top: 48px; } .transaction-heading { margin: 8px auto 48px; text-align: center; } .transaction-heading h1 { font-size:var(--page-title-size); line-height:var(--page-title-leading); } .transaction-heading p { margin-top: var(--space-3); color: var(--ink); } .dfvn-empty-cart { display: grid; grid-template-columns: 1.03fr .97fr; min-height: 460px; overflow: hidden; border-radius: 34px; background: var(--surface); color: var(--ink); } .dfvn-empty-cart__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(35px, 5vw, 78px); } .dfvn-empty-cart__copy .eyebrow { color: var(--muted); } .dfvn-empty-cart h1 { margin:var(--title-lead-gap) 0; font-size:var(--page-title-size); line-height:var(--page-title-leading); letter-spacing: -.085em; } .dfvn-empty-cart__copy > p { max-width: 440px; margin: 0 0 26px; font-size: var(--type-label-size); line-height: 1.45; } .dfvn-empty-cart .button { display: inline-flex; align-items: center; text-decoration: none; } .dfvn-empty-cart .button:hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } .dfvn-empty-cart__art { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--surface); } .dfvn-empty-cart__art>.dfvn-icon { position:relative;width:clamp(140px,18vw,260px);height:clamp(140px,18vw,260px);color:var(--ink); } .dfvn-empty-cart__caption { position: absolute; right: 36px; bottom: 28px; color: var(--ink); font-size: var(--type-caption-size); letter-spacing: .06em; } .dfvn-empty-discover { min-width: 0; max-width: 100%; margin-top: var(--space-16); } .dfvn-empty-discover > header { margin-bottom: var(--space-8); text-align: center; } .dfvn-empty-discover > header .eyebrow { margin-bottom: var(--space-3); } .dfvn-empty-discover > header h2 { font-size:var(--section-title-size); line-height:var(--section-title-leading); letter-spacing: -.07em; } .dfvn-empty-discover__grid { display:flex; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--card-gap); } .dfvn-empty-discover__viewport { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; } .dfvn-empty-discover__viewport::-webkit-scrollbar { display: none; } .dfvn-empty-discover__item { flex: 0 0 calc((100% - var(--card-gap) * 2) / 3); min-width: 0; scroll-snap-align: start; } .dfvn-empty-discover__controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 22px; } .dfvn-empty-discover__controls[hidden] { display: none; } .dfvn-empty-discover__controls button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 1.3rem; cursor: pointer; } .dfvn-empty-discover__controls button:hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } .dfvn-empty-discover__dots { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; min-width: 0; } .dfvn-empty-discover__controls .dfvn-empty-discover__dot { width: 8px; height: 8px; padding: 0; border: 0; background: var(--muted); opacity: .48; transition: transform .2s ease, opacity .2s ease, background-color .2s ease; } .dfvn-empty-discover__controls .dfvn-empty-discover__dot:hover { opacity: var(--hover-opacity); } .dfvn-empty-discover__controls .dfvn-empty-discover__dot[aria-current="true"] { background: var(--ink); opacity: 1; transform: scale(1.35); } @media (max-width: 900px) { .dfvn-empty-cart { grid-template-columns: 1fr; } .dfvn-empty-cart__art { min-height: 260px; } } @media (max-width: 760px) { .dfvn-empty-discover__item { flex-basis: 80%; } .dfvn-empty-cart__copy { padding: 34px 27px; } .dfvn-empty-cart h1 { font-size:var(--page-title-size); line-height:var(--page-title-leading); margin:var(--title-lead-gap) 0; } .dfvn-empty-cart__art { min-height: 220px; } .dfvn-empty-cart__art>.dfvn-icon { width:140px;height:140px; } .dfvn-empty-cart__caption { right: 20px; bottom: 18px; } } @media (prefers-reduced-motion: reduce) { .dfvn-empty-discover__viewport { scroll-behavior: auto; } } .woocommerce-cart .transaction-page > .woocommerce { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); gap: var(--space-6); align-items: start; } .woocommerce-cart .transaction-page > .woocommerce > :not(.dfvn-cart-items):not(.cart-collaterals) { grid-column: 1 / -1; } .woocommerce-cart-form { overflow: hidden; border-radius: 26px; background: var(--surface); } .woocommerce-cart-form table { table-layout: auto; } .woocommerce-cart-form th { padding: 19px 16px; color: var(--muted); font-size: var(--type-caption-size); font-weight:var(--font-semibold,600); letter-spacing: .08em; } .woocommerce-cart-form td { padding: 22px 16px; } .woocommerce-cart-form .product-name { width: 46%; } .woocommerce-cart-form .product-license { color: var(--muted); } .woocommerce-cart-form .product-subtotal { font-weight:var(--font-semibold,600); white-space: nowrap; } .woocommerce-cart-form .product-remove { width: 64px; text-align: right; } .woocommerce-cart-form .product-remove a { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--bg); } .woocommerce-cart-form .product-remove a:hover { opacity: var(--hover-opacity); } .dfvn-cart-product { display: flex; align-items: center; gap: var(--space-4); min-width: 0; } .dfvn-cart-product__image { flex: 0 0 76px; width: 76px; height: 64px; overflow: hidden; border-radius: 12px; } .dfvn-cart-product__image img { width: 100%; height: 100%; object-fit: cover; } .dfvn-cart-product__copy { min-width: 0; } .dfvn-cart-product__copy strong { display: block; font-size: var(--type-answer-size); font-weight:var(--font-semibold,600); line-height: 1.3; } .dfvn-cart-product__copy .variation { font-size: var(--type-meta-size); color: var(--muted); } .dfvn-cart-actions.is-moved { display: none; } .dfvn-cart-continue { display:flex; align-items:center; gap:9px; margin:16px 12px; color:var(--muted); font-size:var(--type-copy-size); justify-content:center; } .dfvn-cart-continue:hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } .cart-collaterals { padding: 28px; border-radius: 26px; background: var(--surface); position: sticky; top: var(--header-height); } .cart_totals h2 { font-size:var(--panel-title-size); margin-bottom:var(--card-title-copy-gap); line-height:var(--panel-title-leading); } .cart_totals td, .cart_totals th { padding: 18px 0; } .cart_totals td { text-align: right; white-space: nowrap; } .cart_totals .order-total td { font-size: 1.5rem; } .cart_totals .coupon { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 12px; } .cart_totals .coupon label { display: none; } .cart_totals .coupon input { flex: 1; min-width: 0; width: auto; } .cart_totals .coupon button { flex: 0 0 auto; } .cart_totals .wc-proceed-to-checkout { margin-top: 14px; } .transaction-page .checkout-button, .transaction-page #place_order { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: var(--pill); background: var(--button-bg); color: var(--button-ink); font-weight:var(--font-semibold,600); } .transaction-page .checkout-button:hover, .transaction-page #place_order:hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } .dfvn-cart-security { margin-top: var(--space-3); font-size: var(--type-meta-size); text-align: center; } .dfvn-cart-benefits { display: grid; gap: 14px; margin-top: var(--space-7); } .dfvn-cart-benefits p { display: flex; align-items: start; gap: var(--space-3); color: var(--ink); } .dfvn-cart-benefits .dfvn-icon { width: 18px; height: 18px; margin-top: 3px; } .dfvn-cart-benefits strong, .dfvn-cart-benefits small { display: block; } .dfvn-cart-benefits strong { font-size: var(--type-small-size); } .dfvn-cart-benefits small { color: var(--muted); font-size: var(--type-meta-size); } .woocommerce-checkout .transaction-page { max-width: var(--site-width); } .transaction-page form.checkout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); gap: var(--space-6); align-items: start; } .transaction-page form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; } .transaction-page form.checkout > .woocommerce-NoticeGroup .woocommerce-error { margin: 0; padding: 16px 22px; list-style: none; background: var(--surface); color: var(--error); font-size: var(--type-copy-size); } .transaction-page .checkout-inline-error-message { display: block; margin-top:var(--field-feedback-gap); color: var(--error); font-size:var(--field-error-size); line-height:var(--field-error-leading); font-weight:var(--font-medium,500); letter-spacing: 0; text-transform: none; } .transaction-page .woocommerce-invalid input:not([type="checkbox"]) { border-color: var(--error); } .checkout-contact-column, .transaction-page #customer_details, .transaction-page .woocommerce-billing-fields { display: grid; gap: 18px; min-width: 0; align-content: start; } .transaction-page #customer_details, .transaction-page .woocommerce-billing-fields { margin-top: 0; } .checkout-panel { padding: 18px; border-radius: 26px; background: var(--surface); } .checkout-panel:empty { display: none; } .checkout-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .checkout-panel-heading a { font-size: var(--type-small-size); font-weight:var(--font-semibold,600); } .checkout-panel h3 { font-size:var(--compact-title-size); margin-bottom:var(--card-title-copy-gap); font-weight:var(--font-semibold,600); line-height:var(--compact-title-leading); } .checkout-panel-heading h3 { margin-bottom: 0; } .checkout-summary { position: sticky; top: var(--header-height); padding: 22px; border-radius: 26px; background: var(--surface); } .transaction-page #order_review_heading { margin-bottom:var(--card-title-copy-gap); font-size:var(--compact-title-size); line-height:var(--compact-title-leading); font-weight:var(--font-semibold,600); } .transaction-page #order_review { padding: 0; } .checkout-summary .shop_table thead { display: none; } .checkout-summary .shop_table td, .checkout-summary .shop_table th { padding: 18px 0; } .checkout-summary .shop_table td:last-child, .checkout-summary .shop_table th:last-child { text-align: right; white-space: nowrap; } .checkout-summary .shop_table .order-total td { font-size: 1.5rem; } .checkout-summary .woocommerce-checkout-review-order-table .cart_item td, .checkout-summary .order-total :is(td, th) { border-bottom: 0; } .dfvn-review-item { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .dfvn-review-item img { width: 62px; height: 62px; flex: 0 0 62px; object-fit: cover; border-radius: 11px; } .dfvn-review-item strong { display: block; font-weight:var(--font-semibold,600); line-height: 1.3; } .dfvn-review-item small { display: block; color: var(--muted); } .dfvn-checkout-coupon { padding: 16px 0; border-bottom: 1px solid var(--line); } .dfvn-checkout-coupon summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; list-style: none; cursor: pointer; } .dfvn-checkout-coupon summary::-webkit-details-marker { display: none; } .dfvn-checkout-coupon summary .dfvn-icon { width: 18px; height: 18px; } .dfvn-checkout-coupon[open] summary .dfvn-icon { transform: rotate(180deg); } .coupon-entry { display: flex; gap: 10px; margin-top: var(--space-4); } .coupon-entry input { min-width: 0; } .coupon-entry .button { flex-shrink: 0; } [data-coupon-status] { margin-top: 10px; font-size: var(--type-small-size); } .checkout-security { display: flex; align-items: start; gap: var(--space-3); margin-top: var(--space-6); padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); font-size: var(--type-meta-size); line-height: 1.5; } .checkout-security .dfvn-icon { width: 18px; height: 18px; flex-shrink: 0; } .transaction-page wc-order-attribution-inputs { display: none; } .transaction-page .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } .transaction-page .woocommerce-billing-fields__field-wrapper > .form-row-wide { grid-column: 1 / -1; } .transaction-page form .form-row { width: auto; margin: 0; } .transaction-page .checkout-contact-panel > .form-row { margin-top: 18px; } .transaction-page .form-row label { display: block; margin-bottom: 7px; color: var(--muted); font-size: var(--form-label-size); font-weight:var(--font-semibold,600); letter-spacing: .07em; text-transform: uppercase; } .transaction-page .form-row input[type="checkbox"] + span { display: inline; } .transaction-page .form-row label.checkbox { color: var(--ink); font-size: var(--type-small-size); font-weight:var(--font-medium,500); letter-spacing: 0; text-transform: none; } .transaction-page .woocommerce-account-fields { margin-top: 14px; } .transaction-page .checkout-create-account label { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--ink); font-size: var(--type-small-size); font-weight:var(--font-medium,500); letter-spacing: 0; text-transform: none; cursor: pointer; } .transaction-page .checkout-create-account input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 17px; margin: 0; accent-color: var(--ink); } .transaction-page .checkout-create-account small { display: block; margin: 4px 0 0 27px; color: var(--muted); font-size: var(--type-meta-size); } .transaction-page .checkout-create-account--required label { cursor: default; } .transaction-page .woocommerce-account-fields > div.create-account { margin-top: var(--space-3); } .transaction-page #payment { border: 0; background: transparent; } .transaction-page #payment ul.wc_payment_methods { display: grid; gap: 10px; padding: 0; margin: 0 0 18px; list-style: none; border: 0; background: transparent; } .transaction-page #payment .wc_payment_method { position: relative; min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); } .transaction-page #payment .wc_payment_method:has(input:checked) { border-color: var(--line); } .transaction-page #payment .wc_payment_method > input[type="radio"] { position: absolute; top: 25px; right: 20px; width: 16px; height: 16px; margin: 0; accent-color: var(--ink); } .transaction-page #payment .wc_payment_method > label { display: flex; align-items: center; gap: var(--space-3); max-width: calc(100% - 28px); margin: 0; color: var(--ink); font-size: var(--type-answer-size); font-weight:var(--font-semibold,600); letter-spacing: 0; text-transform: none; cursor: pointer; } .transaction-page #payment .payment_method_sepay { padding-left: 84px; } .transaction-page #payment .payment_method_sepay > label::before { content: ''; position: absolute; left: 18px; top: 22px; width: 52px; height: 52px; border-radius: 14px; background: var(--button-bg); } .transaction-page #payment .payment_method_sepay > label > .icon-qr-scan { position: absolute; left: 32px; top: 36px; width: 24px; height: 24px; color: var(--button-ink); } .transaction-page #payment .payment_method_sepay .payment_box { padding: 6px 12px 0 0; } .transaction-page #payment .payment_method_sepay > .icon-badge-check { pointer-events: none; position: absolute; right: 0; bottom: 0; width: 82px; height: 82px; opacity: .04; } .transaction-page #payment .payment_box { padding: 5px 25px 0 50px; background: transparent; color: var(--muted); font-size: var(--type-small-size); line-height: 1.55; } .transaction-page #payment .payment_box::before { display: none; } .transaction-page #place_order { border-radius: 14px; } .transaction-page #payment .form-row.place-order { padding: 0; margin: 0; } .transaction-page .woocommerce-privacy-policy-text { margin: 16px 0; font-size: var(--type-small-size); line-height: 1.6; } .transaction-page .woocommerce-terms-and-conditions-wrapper { margin-top: var(--space-4); font-size: var(--type-small-size); } .transaction-page .woocommerce-terms-and-conditions { max-height: min(52vh, 520px) !important; padding: 24px !important; margin: 16px 0 !important; border-radius: 18px; background: var(--bg); color: var(--ink); font-size: var(--type-copy-size); line-height: 1.7; overflow-wrap: anywhere; } .transaction-page .woocommerce-terms-and-conditions > :first-child { margin-top: 0; } .transaction-page .woocommerce-terms-and-conditions h1, .transaction-page .woocommerce-terms-and-conditions h2, .transaction-page .woocommerce-terms-and-conditions h3 { margin: 22px 0 10px; line-height: 1.25; } .transaction-page .woocommerce-terms-and-conditions h1 { font-size:var(--panel-title-size); } .transaction-page .woocommerce-terms-and-conditions h2, .transaction-page .woocommerce-terms-and-conditions h3 { font-size:var(--compact-title-size); } .transaction-page .woocommerce-terms-and-conditions p, .transaction-page .woocommerce-terms-and-conditions ul, .transaction-page .woocommerce-terms-and-conditions ol { margin: 0 0 16px; } .transaction-page .woocommerce-terms-and-conditions li { margin: 0 0 8px; } .transaction-page .woocommerce-terms-and-conditions hr { margin: 20px 0; border: 0; border-top: 1px solid var(--line); } .transaction-page .woocommerce-terms-and-conditions a { text-decoration: underline; text-underline-offset: 3px; } .transaction-page .select2-container { max-width: 100%; } .woocommerce-checkout:not(.woocommerce-order-received) .transaction-heading { max-width: var(--commerce-max); margin: 10px auto clamp(28px, 4vw, 50px); text-align: center; } .woocommerce-checkout:not(.woocommerce-order-received) .transaction-heading h1 { font-size:var(--page-title-size); } .woocommerce-checkout:not(.woocommerce-order-received) .checkout-panel, .woocommerce-checkout:not(.woocommerce-order-received) .checkout-summary { --form-label-size:var(--form-label-compact-size); border: 0; border-radius: 26px; } .woocommerce-checkout:not(.woocommerce-order-received) .checkout-panel h3, .woocommerce-checkout:not(.woocommerce-order-received) #order_review_heading { margin-bottom:var(--card-title-copy-gap); font-size:var(--form-section-title-size); line-height:var(--form-section-title-leading); font-weight:var(--font-medium,500); letter-spacing: -.02em; } .woocommerce-checkout:not(.woocommerce-order-received) .checkout-panel-heading h3 { margin-bottom: 0; } .woocommerce-checkout:not(.woocommerce-order-received) .checkout-summary :is(.cart-subtotal,.order-total) th { font-weight:var(--font-medium,500); } .woocommerce-checkout:not(.woocommerce-order-received) .checkout-summary .order-total :is(td,strong,.amount) { font-weight:var(--font-medium,500); } .woocommerce-checkout:not(.woocommerce-order-received) .checkout-summary .order-total td { color: var(--ink); } .woocommerce-checkout:not(.woocommerce-order-received) .checkout-security { border-radius: 18px; } .woocommerce-order-received .transaction-page { padding-top: clamp(20px, 3vw, 42px); } .woocommerce-order-received .transaction-heading { display: none; } .transaction-page .dfvn-received { display: grid; gap: var(--space-6); max-width: 1040px; margin: 0 auto; } .dfvn-received-heading { display: grid; justify-items: center; gap: 14px; margin: 10px 0 16px; text-align: center; } .dfvn-received-heading h1 { font-size:var(--account-title-size); line-height:var(--account-title-leading); } .dfvn-received-heading > p:last-child { max-width: 650px; font-size: var(--type-answer-size); } .dfvn-received-card { overflow: hidden; border: 0; border-radius: 32px; background: var(--surface); } .dfvn-received-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); padding: clamp(28px, 4vw, 48px); text-align: center; } .dfvn-received-illustration { position: relative; display: grid; place-items: center; width: 144px; height: 144px; border-radius: 32px; background: var(--bg); } .dfvn-received-illustration > .dfvn-icon { width: 74px; height: 74px; } .dfvn-received-illustration .dfvn-received-mark { position: absolute; bottom: -8px; right: -8px; width: 48px; height: 48px; font-size: 1.4rem; border: 5px solid var(--surface); background: var(--accent); color: var(--accent-ink); } .dfvn-received-actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; padding: 0 24px 28px; } .dfvn-received-hero .dfvn-received-actions { padding: 0; } .dfvn-received-actions .button { display: inline-flex; align-items: center; justify-content: center; } .dfvn-received-actions .button:hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } .dfvn-received-actions .button .dfvn-icon,.dfvn-received-card.is-paid .dfvn-received-actions .button .dfvn-icon { flex:0 0 18px; width:18px; height:18px; } .dfvn-received-hero-copy { flex: 1; min-width: 0; } .dfvn-received-hero .eyebrow { color: var(--muted); font-size: var(--type-meta-size); letter-spacing: .12em; } .dfvn-received-hero h1 { margin:var(--space-2) 0 var(--title-lead-gap); font-size:var(--account-title-size); line-height:var(--account-title-leading); } .dfvn-received-hero-copy > p:last-child { max-width: 720px; color: var(--muted); line-height: 1.55; } .dfvn-received-mark { display: grid; place-items: center; flex: 0 0 78px; width: 78px; height: 78px; border-radius: 50%; background: #e1f2e4; color: #257a4a; font-size: 2.35rem; font-weight:var(--font-bold,700); line-height: 1; } .dfvn-received-card.is-pending .dfvn-received-mark { background: #fff1d7; color: #a16a0a; } .dfvn-received-card.is-failed .dfvn-received-mark { background: #ffe9e5; color: var(--error); } .dfvn-received-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; } .dfvn-received-card.is-paid .dfvn-received-overview { border-top:1px solid var(--line); grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; margin-top:var(--space-8); padding-top:24px; border-color:var(--receipt-line); text-align:center; } .dfvn-received-overview > div { display: grid; align-content: start; gap: var(--space-2); min-width: 0; padding: 22px 25px; } .dfvn-received-overview > div + div { border-left: 1px solid var(--line); } .dfvn-received-overview > div > span { color: var(--muted); font-size: var(--type-caption-size); letter-spacing: .09em; text-transform: uppercase; } .dfvn-received-overview strong { overflow-wrap: anywhere; font-size: var(--type-label-size); font-weight:var(--font-semibold,600); } .dfvn-received-total strong { color: var(--ink); } .dfvn-received-gateway { min-width: 0; padding: 0; border-top: 1px solid var(--line); background: var(--surface); } .dfvn-received-gateway:empty { display: none; } .dfvn-received-gateway .woocommerce-sepay-bank-details { max-width: none; margin: 0; } .transaction-page .dfvn-received-gateway .sepay-box { max-width: none; width: 100%; padding: 0; border: 0; box-shadow: none; background: transparent; } .transaction-page .dfvn-received-gateway .sepay-box > .box-title { display: none; } .transaction-page .dfvn-received-gateway .sepay-pay-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; margin: 0; overflow: hidden; border: 0; border-radius: 0; background: var(--surface); } .transaction-page .dfvn-received-gateway .manual-box { order: 1; min-width: 0; width: 100%; padding: clamp(22px, 3vw, 36px); background: var(--surface); } .transaction-page .dfvn-received-gateway .qr-box { order: 2; min-width: 0; width: 100%; padding: clamp(22px, 3vw, 36px); border-left: 1px solid var(--line); background: var(--surface); } .dfvn-received-gateway .manual-title, .dfvn-received-gateway .qr-title { width: 100%; margin-bottom:var(--card-title-copy-gap); color: var(--ink); font-size:var(--compact-title-size); font-weight:var(--font-semibold,600); line-height:var(--compact-title-leading); text-align: left; } .dfvn-received-gateway :is(.manual-title, .qr-title) b { font-weight: inherit; } .dfvn-received-gateway .bank-info { width: 100%; border: 0 !important; } .dfvn-received-gateway .bank-info .banner { justify-content: flex-start !important; min-height: 55px; padding: 10px 16px; border-bottom: 1px solid var(--line); } .dfvn-received-gateway .bank-info .bank-logo { max-width: 95px; max-height: 32px; margin: 0 !important; } .dfvn-received-gateway .bank-info-table { display: block !important; } .dfvn-received-gateway .bank-info-row-group { display: block !important; } .dfvn-received-gateway .bank-info-row { display: flex !important; flex-direction: row !important; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); } .dfvn-received-gateway .bank-info-cell { display: block !important; flex: 1 1 50%; min-width: 0; padding: 12px 15px !important; margin: 0 !important; border: 0 !important; overflow-wrap: anywhere; } .dfvn-received-gateway .bank-info-cell:first-child { color: var(--muted); font-size: var(--type-small-size); } .dfvn-received-gateway .bank-info-cell:last-child { font-weight:var(--font-semibold,600); } .dfvn-received-gateway .bank-info-value { justify-content: space-between; } .dfvn-received-gateway .manual-box .note { margin: 14px 0 0; border-radius: 14px; line-height: 1.45; } .dfvn-received-gateway .qr-zone { max-width: 320px; margin-inline: auto; } .dfvn-received-gateway .qr-image { max-width: 100%; height: auto; } .dfvn-received-gateway .qr-element { margin-inline: auto; } .dfvn-received-gateway .sepay-pay-footer { padding: 18px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--type-small-size); text-align: center; } .dfvn-received-details { padding: clamp(26px, 4vw, 44px); border: 0; border-radius: 26px; background: var(--surface); } .dfvn-received-details:empty { display: none; } .dfvn-received-details h2 { margin:0 0 var(--card-title-copy-gap); font-size:var(--account-section-title-size); line-height:var(--account-section-title-leading); } .dfvn-received-details table { width: 100%; border-collapse: collapse; } .dfvn-received-details :is(th, td) { padding: 14px 8px; border-bottom: 1px solid var(--line); text-align: left; } .dfvn-received-details :is(td:last-child, th:last-child) { text-align: right; } .dfvn-received-details .woocommerce-order-details, .dfvn-received-details .woocommerce-customer-details { margin-top: 22px; } .dfvn-received-details .woocommerce-order-downloads { margin-bottom: 30px; } .dfvn-received-details address { font-style: normal; line-height: 1.7; } .dfvn-order-files { overflow: hidden; border-radius: 22px; background: var(--bg); } .dfvn-order-files summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px; list-style: none; cursor: pointer; font-size: var(--type-body-size); font-weight:var(--font-semibold,600); } .dfvn-order-files summary::-webkit-details-marker { display: none; } .dfvn-order-files summary small, .dfvn-order-files-hint { color: var(--muted); font-size: var(--type-small-size); font-weight:var(--font-regular,400); } .dfvn-order-files-hint { display:inline-flex; align-items:center; gap:var(--space-2); } .dfvn-order-files-hint .dfvn-icon { width:16px; height:16px; flex-shrink:0; } .dfvn-order-files-list { border-top: 1px solid var(--line); } .dfvn-order-file { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; padding: 20px 22px; } .dfvn-order-file + .dfvn-order-file { border-top: 1px solid var(--line); } .dfvn-order-file-cell { min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: var(--type-meta-size); } .dfvn-order-file .download-product { grid-column: 1; font-size: var(--type-body-size); font-weight:var(--font-semibold,600); color: var(--ink); } .dfvn-order-file .download-file { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: end; justify-content: center; gap: 7px; max-width: 240px; } .dfvn-order-file .download-file .button:hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } .dfvn-order-file-cell > span { margin-right: 6px; } .dfvn-order-file .download-product a { color: var(--link); } .dfvn-order-file .download-product a:hover { opacity: var(--hover-opacity); } @media (max-width: 600px) { .dfvn-order-files summary { align-items: start; flex-direction: column; padding: 18px; } .dfvn-order-file { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 18px; } .dfvn-order-file .download-file { grid-column: 1; grid-row: auto; align-items: start; margin-top: var(--space-2); max-width: 100%; order: 5; } .dfvn-order-file .download-file small { text-align: left; } } /* Completed orders follow the single-card reference; the invoice is a separate view. */ .woocommerce-order-received { --receipt-page: var(--bg); --receipt-surface: var(--surface); --receipt-line: var(--line); --receipt-muted: var(--muted); background: var(--receipt-page); } html[data-theme="dark"] .woocommerce-order-received { --receipt-page: var(--bg); --receipt-surface: var(--surface); --receipt-line: var(--line); --receipt-muted: var(--muted); } @media (prefers-color-scheme: dark) { html[data-theme="system"] .woocommerce-order-received { --receipt-page: var(--bg); --receipt-surface: var(--surface); --receipt-line: var(--line); --receipt-muted: var(--muted); } } .dfvn-received-card.is-paid { width: 100%; max-width: 960px; margin-inline: auto; padding: 40px clamp(28px, 5vw, 74px); border-radius: 32px; background: var(--receipt-surface); } .dfvn-received-card.is-paid .dfvn-received-hero { gap: 0; padding: 0; } .dfvn-received-card.is-paid .dfvn-received-illustration { width: 225px; height: 225px; border-radius: 0; background: transparent; } .dfvn-received-card.is-paid .dfvn-received-illustration > .dfvn-icon { width: 132px; height: 132px; } .dfvn-received-card.is-paid .dfvn-received-hero h1 { margin:0 0 var(--title-lead-gap); font-size:var(--account-title-size); line-height:var(--account-title-leading); letter-spacing: -.065em; } .dfvn-received-card.is-paid .dfvn-received-hero-copy > p { max-width: 699px; margin: 0 auto; color: var(--receipt-muted); font-size: var(--type-answer-size); line-height: 1.6; } .dfvn-received-card.is-paid .dfvn-received-actions { margin-top: var(--space-7); gap: 14px; } .dfvn-received-card.is-paid .dfvn-received-actions .button { min-width: 178px; } .dfvn-received-card.is-paid .dfvn-received-actions .button:hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } .dfvn-receipt-files { margin-top: var(--space-6); text-align: left; } .dfvn-receipt-files summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; list-style: none; cursor: pointer; font-size: var(--type-answer-size); line-height: 1.3; } .dfvn-receipt-files summary::-webkit-details-marker { display: none; } .dfvn-receipt-files-hint { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--receipt-muted); font-size: var(--type-small-size); } .dfvn-receipt-chevron { width: 16px; height: 16px; flex: 0 0 16px; transition: transform var(--speed); } .dfvn-receipt-files[open] .dfvn-receipt-chevron { transform: rotate(180deg); } .dfvn-receipt-files-list { border-top: 1px solid var(--receipt-line); } .dfvn-receipt-file { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; } .dfvn-receipt-file + .dfvn-receipt-file { border-top: 1px solid var(--receipt-line); } .dfvn-receipt-file-meta { min-width: 0; } .dfvn-receipt-file-name { font-size: var(--type-body-size); line-height: 1.3; overflow-wrap: anywhere; } .dfvn-receipt-product-link { display: inline-block; margin-top: 4px; color: var(--receipt-muted); font-size: var(--type-small-size); } .dfvn-receipt-product-link:hover { opacity: var(--hover-opacity); } .dfvn-receipt-file-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: var(--space-2); max-width: 50%; } .dfvn-receipt-file-action { display: grid; justify-items: end; gap: 6px; min-width: 0; } .dfvn-receipt-file-action small { color: var(--receipt-muted); font-size: var(--type-caption-size); text-align: right; } .dfvn-receipt-file-actions .button { display: inline-flex; align-items: center; justify-content: center; min-width: 110px; overflow-wrap: anywhere; } .dfvn-receipt-file-actions .button:hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } .dfvn-received-card.is-paid .dfvn-received-overview > div { gap: var(--space-2); padding: 12px 0; border: 0; } .dfvn-received-card.is-paid .dfvn-received-overview > div > span { color: var(--receipt-muted); font-size: var(--type-micro-size); letter-spacing: .1em; } .dfvn-received-card.is-paid .dfvn-received-overview strong { font-size: var(--type-answer-size); } .dfvn-received-extensions { width: 100%; max-width: 960px; margin-inline: auto; padding: 0; background: transparent; } @media (max-width: 600px) { .dfvn-received-card.is-paid { padding: 28px 18px; border-radius: 26px; } .dfvn-received-card.is-paid .dfvn-received-illustration { width: 180px; height: 180px; } .dfvn-received-card.is-paid .dfvn-received-illustration > .dfvn-icon { width: 110px; height: 110px; } .dfvn-received-card.is-paid .dfvn-received-actions { width: 100%; } .dfvn-received-card.is-paid .dfvn-received-actions .button { min-width: 0; flex: 1 1 130px; } .dfvn-receipt-files summary { align-items: start; flex-direction: column; gap: var(--space-2); padding-inline: 2px; } .dfvn-receipt-files-hint { width: 100%; justify-content: space-between; font-size: var(--type-meta-size); } .dfvn-receipt-file { padding-inline: 2px; gap: 14px; } .dfvn-receipt-file-actions { max-width: 50%; flex: 0 0 auto; } .dfvn-receipt-file-actions .button { min-width: 96px; } .dfvn-received-card.is-paid .dfvn-received-overview { grid-template-columns: 1fr; gap: var(--space-3); text-align: left; } .dfvn-received-card.is-paid .dfvn-received-overview > div { padding: 0; border: 0; } } .dfvn-orders { display: grid; gap: var(--space-6); } .dfvn-orders-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); } .dfvn-orders-head h1 { margin:var(--space-2) 0 var(--account-title-lead-gap); font-size:var(--account-title-size); line-height:var(--account-title-leading); } .dfvn-orders-head p:last-child { color: var(--muted); } .dfvn-orders-heading { margin-bottom:0; } .dfvn-orders-count { display:inline-flex; vertical-align:middle; margin-left:12px; padding:6px 12px; border-radius:var(--pill); background:var(--surface); font-family:var(--dfvn-body-font); font-size:var(--type-copy-size); font-weight:var(--font-weight); letter-spacing:0; line-height:1.5; } .dfvn-orders-list { display: grid; gap: var(--space-3); } .dfvn-order-card { padding: clamp(20px, 2.6vw, 30px); border: 0; border-radius: 23px; background: var(--surface); } .dfvn-order-card-main, .dfvn-order-card-foot, .dfvn-order-meta, .dfvn-order-actions { display: flex; align-items: center; gap: var(--space-3); } .dfvn-order-card-main, .dfvn-order-card-foot { justify-content: space-between; } .dfvn-order-card-id span { color: var(--muted); font-size: var(--type-caption-size); font-weight:var(--font-bold,700); letter-spacing: .1em; } .dfvn-order-card-id h2 { margin-top: 2px; font-size:var(--account-card-title-size); line-height:var(--account-card-title-leading); } .dfvn-order-status { padding: 8px 13px; border-radius: var(--pill); background: #fff1d7; color: #815812; font-size: var(--type-meta-size); font-weight:var(--font-bold,700); white-space: nowrap; } .dfvn-order-status:is(.is-completed, .is-processing) { background: #e1f2e4; color: #257a4a; } .dfvn-order-status:is(.is-failed, .is-cancelled, .is-refunded) { background: #ffe9e5; color: var(--error); } .dfvn-order-products { margin: 17px 0; overflow: hidden; color: var(--ink); font-size: var(--type-answer-size); font-weight:var(--font-medium,500); text-overflow: ellipsis; white-space: nowrap; } .dfvn-order-card-foot { padding-top: 17px; border-top: 1px solid var(--line); } .dfvn-order-meta { flex-wrap: wrap; color: var(--muted); font-size: var(--type-small-size); } .dfvn-order-meta strong { color: var(--ink); font-size: var(--type-answer-size); } .dfvn-order-action { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } .dfvn-order-action:hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } .dfvn-orders-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-3); font-size: var(--type-small-size); } .dfvn-orders-empty { display: grid; justify-items: center; align-content: center; gap: var(--space-3); min-height: 330px; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); text-align: center; } .dfvn-orders-empty .dfvn-icon { font-size: 2rem; } .dfvn-orders-empty h2 { font-size:var(--account-section-title-size); line-height:var(--account-section-title-leading); } .dfvn-orders-empty .button { margin-top: var(--space-3); } .dfvn-downloads { display: grid; gap: 22px; } .dfvn-downloads-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); } .dfvn-downloads-head h2 { margin:var(--space-2) 0 var(--account-title-lead-gap); font-size:var(--account-section-title-size); line-height:var(--account-section-title-leading); } .dfvn-downloads-head > div > p:last-child { color: var(--muted); } .dfvn-downloads-count { display:inline-flex; vertical-align:middle; margin-left:12px; padding:6px 12px; border-radius:var(--pill); background:var(--surface); font-family:var(--dfvn-body-font); font-size:var(--type-copy-size); font-weight:var(--font-weight); letter-spacing:0; line-height:1.5; } .dfvn-downloads-heading { margin-bottom:0; } .dfvn-download-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); min-width:0; } .dfvn-download-toolbar .account-download-search { flex:1; min-width:0; display:grid; grid-template-columns:minmax(140px,1fr) minmax(150px,190px) auto; gap:var(--space-3); } .dfvn-downloads-filter { min-width:0; } .dfvn-downloads-filter select { width:100%; height:100%; } .dfvn-download-bundle-action { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); font-size:var(--type-copy-size); } .dfvn-download-bundle-action .dfvn-icon { width:18px; height:18px; flex:none; } .dfvn-downloads-list { display:grid; gap:var(--space-3); } .dfvn-bundle-action { margin:18px 0; } .dfvn-bundle-action .dfvn-icon { width:18px; height:18px; } .dfvn-download-card { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:18px; min-width:0; padding:20px 24px; border:0; border-radius:20px; background:var(--surface); } .dfvn-download-card[hidden] { display:none; } .dfvn-download-icon { display:grid; place-items:center; width:44px; height:44px; } .dfvn-download-icon .dfvn-icon { width:22px; height:22px; } .dfvn-download-copy { min-width:0; } .dfvn-download-copy h3 { margin:0 0 var(--space-2); font-size:var(--account-row-title-size); line-height:var(--account-row-title-leading); } .dfvn-download-copy p { color:var(--paragraph-ink); overflow-wrap:anywhere; font-size:var(--type-small-size); } .dfvn-download-meta { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:6px; color:var(--muted); font-size:var(--type-small-size); } .dfvn-download-meta a { --download-meta-icon-gap:6px; display:inline-flex; align-items:center; gap:var(--download-meta-icon-gap); color:inherit; } .dfvn-download-meta a:hover { text-decoration:underline; } .dfvn-download-actions { display:flex; align-items:center; } .dfvn-download-actions .button { gap:var(--space-2); min-height:42px; font-size:var(--type-copy-size); } .dfvn-download-order { color:var(--muted); font-size:var(--type-meta-size); text-decoration:underline; } .dfvn-downloads-empty { display: grid; justify-items: center; gap: var(--space-3); padding: 60px 24px; border: 0; border-radius: 24px; background: var(--surface); text-align: center; } .dfvn-downloads-empty .dfvn-icon { width: 38px; height: 38px; } .dfvn-downloads-empty h3 { font-size:var(--account-card-title-size); line-height:var(--account-card-title-leading); } .dfvn-downloads-no-results { padding: 24px; color: var(--muted); text-align: center; } .dfvn-downloads-no-results[hidden] { display: none; } .prose svg { width: 24px; height: 24px; flex-shrink: 0; } .prose :is(button, input[type="submit"]), .contact-layout input[type="submit"] { cursor: pointer; } .contact-layout .prose { padding: var(--panel-padding); background: var(--surface); border-radius: var(--radius); } .contact-layout .prose h2 { font-size:var(--prose-heading-size); } .contact-layout .prose h3 { margin-block: 24px 12px; } .contact-layout .prose > h1 { font-size:var(--form-title-size); margin-top: 0; line-height:var(--form-title-leading); } .dfvn-chip { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-5); font-size: var(--type-small-size); } .dfvn-contact-pro h1 { margin-bottom:var(--space-6); grid-column:1; margin:0; max-width:11ch; font-size:var(--page-title-size); line-height:var(--page-title-leading); } .dfvn-contact-pro .card h2 { font-size:var(--panel-title-size); margin-bottom:var(--title-lead-gap); line-height:var(--panel-title-leading); } .dfvn-contact-pro .card h3 { margin-block: 32px 12px; } .dfvn-contact-pro .lead { color: var(--paragraph-ink); line-height: 1.8; } .contact-social-links { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--type-small-size); } .wpcf7-form .dfvn-grid { display: grid; gap: var(--space-4); } .wpcf7-form > p { margin-bottom: var(--space-5); } .wpcf7-form input[type="submit"] { cursor: pointer; } .dfvn-vh h1 { margin-bottom: var(--space-6); } .dfvn-vh h2 { margin-bottom: var(--space-5); } .dfvn-vh .dfvn-bullets { list-style: none; padding: 0; display: grid; gap: var(--space-4); margin-block: var(--space-7); } .dfvn-bullets li { display: flex; align-items: center; gap: var(--space-3); } .dfvn-vh .dfvn-cta, .dfvn-vh .dfvn-badges { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-6); } .dfvn-vh .dfvn-btn { display: inline-block; text-decoration: none; } .dfvn-vh .b { font-size: var(--type-meta-size); color: var(--muted); } .dfvn-vh .sub { color: var(--muted); font-size: var(--type-copy-size); } .dfvn-icon { display: inline-flex; align-items: center; width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -.15em; } .header-cart .dfvn-icon { width: var(--header-icon-size); height: var(--header-icon-size); } .customer-page { max-width: var(--commerce-max); padding-top: clamp(32px, 4vw, 64px); } .customer-content-heading { margin-bottom:var(--account-heading-content-gap); } .customer-content-heading h1 { font-size:var(--account-title-size); line-height:var(--account-title-leading); margin:0; } .customer-content-heading p { color: var(--paragraph-ink); font-size:var(--account-lead-size); line-height:var(--account-lead-leading); margin-top:var(--account-title-lead-gap); } .customer-page > .woocommerce { display: grid; grid-template-columns: minmax(240px, 285px) minmax(0, 1fr); gap: clamp(20px, 2.3vw, 32px); align-items: start; } .customer-page .woocommerce-MyAccount-navigation { position: sticky; top: calc(var(--admin-offset) + var(--header-height) + 20px); min-width: 0; } .customer-profile { display: grid; justify-items: center; gap: var(--space-2); padding: 24px 18px; margin-bottom: 14px; border-radius: 24px; background: var(--surface); text-align: center; } .customer-profile strong { font-size: var(--type-label-size); line-height: 1.35; } .customer-profile-email { max-width: 100%; overflow-wrap: anywhere; color: var(--muted); font-size: var(--type-body-size); } .customer-profile-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; margin-top: 6px; border-radius: var(--pill); background: var(--button-bg); color: var(--button-ink); font-size: var(--type-body-size); font-weight:var(--font-semibold,600); } .customer-profile-badge .dfvn-icon { width: 14px; height: 14px; } .customer-avatar { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 4px; border-radius: var(--pill); background: var(--bg); font-size: 1.65rem; font-weight:var(--font-semibold,600); } .customer-page .woocommerce-MyAccount-navigation ul { display: grid; gap: 3px; padding: 8px; margin: 0; border-radius: 22px; background: var(--surface); list-style: none; } .customer-page .woocommerce-MyAccount-navigation a { display: flex; align-items: center; gap: var(--space-3); min-height: 50px; padding: var(--account-nav-pad, 10px 12px); border-radius: var(--account-nav-radius, 22px); font-size: var(--type-body-size); transition: background var(--speed), color var(--speed); } .customer-page .woocommerce-MyAccount-navigation a > .dfvn-icon:first-child { width: 18px; height: 18px; } .customer-page .woocommerce-MyAccount-navigation a:hover { opacity: var(--hover-opacity); } .customer-page .woocommerce-MyAccount-navigation .is-active a { background: var(--button-bg); color: var(--button-ink); } .customer-page .woocommerce-MyAccount-content { min-width: 0; } .customer-welcome { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); padding: clamp(24px, 3vw, 38px); border-radius: 26px; background: var(--surface); } .customer-welcome h2 { max-width: 700px; margin: 11px 0; font-size:var(--account-section-title-size); line-height:var(--account-section-title-leading); } .customer-welcome p { color:var(--paragraph-ink); font-size:var(--type-body-size); line-height:var(--copy-leading); } .customer-welcome .button { flex: 0 0 auto; } .customer-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); margin: 14px 0 26px; } .customer-stat { display: grid; gap: 4px; min-height: 140px; padding: 19px; border-radius: 20px; background: var(--surface); transition: transform var(--speed), background var(--speed); } .customer-stat:hover { opacity: var(--hover-opacity); } .customer-stat > span { color: var(--muted); font-size: var(--type-body-size); } .customer-stat strong { font-size: clamp(1.7rem, 2.4vw, 2.5rem); line-height: 1; font-weight:var(--font-semibold,600); } .customer-stat small { align-self: end; font-size: var(--type-body-size); font-weight:var(--font-semibold,600); } .customer-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); } .customer-dashboard-section { min-width: 0; padding: 24px; border-radius: 24px; background: var(--surface); } .customer-dashboard-section > header { display: flex; justify-content: space-between; align-items: end; gap: var(--space-3); margin-bottom: var(--space-5); } .customer-dashboard-section h3 { margin-top: 7px; font-size:var(--account-card-title-size); line-height:var(--account-card-title-leading); } .customer-dashboard-section > header > a { font-size: var(--type-body-size); font-weight:var(--font-semibold,600); white-space: nowrap; } .customer-empty { display: grid; justify-items: start; align-content: center; gap:var(--account-row-title-copy-gap); min-height: 205px; padding: 20px; border-radius: 17px; background: var(--bg); } .customer-empty > .dfvn-icon { width: 28px; height: 28px; margin-bottom: 5px; } .customer-empty strong { font-size:var(--account-row-title-size); line-height:var(--account-row-title-leading); } .customer-empty p { color:var(--paragraph-ink); font-size:var(--type-body-size); line-height:var(--copy-leading); } .customer-empty a { margin-top: var(--space-2); font-size: var(--type-body-size); font-weight:var(--font-semibold,600); } .customer-order-list { display: grid; } .customer-order-list > a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 14px 0; border-top: 1px solid var(--line); font-size: var(--type-body-size); } .customer-order-list > a span:first-child { display: grid; gap: 3px; } .customer-order-list small { color: var(--muted); } .customer-saved-preview .saved-font-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .customer-saved-preview .saved-font-card .saved-font-tools { display: none; } .customer-page .woocommerce-MyAccount-content > :is(form, .woocommerce-Addresses, .woocommerce-orders-table, .woocommerce-MyAccount-downloads, .woocommerce-order, .woocommerce-Message, .woocommerce-info) { padding: clamp(22px, 2.6vw, 34px); border-radius: 24px; background: var(--surface); } .customer-page .woocommerce-MyAccount-content > p { margin-bottom: var(--space-5); } .customer-page .woocommerce-Addresses { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); } .customer-page .woocommerce-Address h2, .customer-page .woocommerce-MyAccount-content > form > h3 { font-size:var(--account-section-title-size); margin-bottom:var(--card-title-copy-gap); line-height:var(--account-section-title-leading); } .customer-page .woocommerce-Address address { font-style: normal; line-height: 1.8; } .customer-page fieldset { padding: 22px; margin-block: var(--space-6); border: 1px solid var(--line); border-radius: 16px; } .customer-page label { display: block; margin-bottom: var(--space-2); font-size: var(--form-label-size); font-weight:var(--font-semibold,600); } .customer-page .form-row { margin-bottom: var(--space-4); } .customer-page :is(input.input-text, input[type="password"], input[type="email"], textarea, select) { width: 100%; } .customer-page .woocommerce-EditAccountForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; } .customer-page .woocommerce-EditAccountForm > :is(.form-row-wide, fieldset, p:last-of-type) { grid-column: 1 / -1; } .customer-page .woocommerce-EditAccountForm > .clear { display: none; } .customer-page .woocommerce-EditAccountForm .form-row { min-width: 0; margin: 0; } .customer-page .woocommerce-EditAccountForm fieldset { display: grid; gap: var(--space-4); margin: 0; } .customer-page .woocommerce-EditAccountForm fieldset .form-row { width: 100%; } .customer-page .password-input { position: relative; display: block; } .customer-page .password-input input { padding-right: 48px; } .customer-page .show-password-input { position: absolute; top: 50%; right: 13px; display: grid; place-items: center; width: 23px; height: 23px; padding: 0; transform: translateY(-50%); border: 0; background: transparent; color: var(--muted); font-size: 0; cursor: pointer; } .customer-page .show-password-input > .dfvn-icon { width: 20px; height: 20px; } .customer-page .woocommerce-MyAccount-content > :is(.woocommerce-Message, .woocommerce-info) { display: grid; justify-items: center; align-content: center; gap: var(--space-4); min-height: 250px; border: 0; text-align: center; font-size: var(--type-emphasis-size); } .customer-page .woocommerce-MyAccount-content > .woocommerce-info:has(a[href*="wc_send_verification"]) { --account-verification-height: 120px; min-height: var(--account-verification-height); } .customer-page .woocommerce-MyAccount-content > :is(.woocommerce-Message, .woocommerce-info) > :is(.icon-spark,.icon-auth-mail) { width: 34px; height: 34px; } .customer-page .woocommerce-MyAccount-content > :is(.woocommerce-Message, .woocommerce-info) .button { order: 1; margin: 0; } .customer-page .woocommerce-MyAccount-content table:not(.club-ledger):not(.club-referral-ledger) { width:100%; border-collapse:collapse; font-size:var(--account-table-size); line-height:var(--account-table-leading); } .customer-page .woocommerce-MyAccount-content table:not(.club-ledger):not(.club-referral-ledger) :is(th,td) { padding: 14px 10px; border-bottom: 1px solid var(--line); text-align: left; } .customer-page .dfvn-google-account { margin-top: 18px; padding: 18px 20px; border-radius: 16px; background: var(--surface); font-size: var(--type-body-size); } .skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 12px; background: var(--surface); } .skip-link:focus { top: 10px; } .sr-only, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 1200px) { .saved-account-page .saved-font-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 783px) { .admin-bar { --admin-offset: 32px; } } @media (min-width: 601px) and (max-width: 782px) { .admin-bar { --admin-offset: 46px; } } @media (max-width: 900px) { .dfvn-contact-pro .c-main > .grid, .dfvn-vh .dfvn-steps { grid-template-columns: 1fr; } .shop-heading { align-items: start; flex-direction: column; --shop-heading-pad:var(--shop-heading-start-space) 0 var(--page-heading-content-gap); --shop-intro-size:var(--lead-size); } .shop-heading > p { max-width: 480px; } .product-reading { grid-template-columns: 1fr; gap: var(--space-8); } .product-side { grid-row: 1; position: static; } .product-support { display: grid; grid-template-columns: 34px 1fr; align-items: center; } .product-support .button { grid-column: 2; justify-self: start; } .dfvn-product .summary { position: static; } .woocommerce-cart .transaction-page > .woocommerce, .transaction-page form.checkout { grid-template-columns: minmax(0, 1fr); } .transaction-page .checkout-contact-column { display: contents; } .transaction-page #customer_details { order: 1; } .transaction-page .checkout-summary { order: 2; } .transaction-page .checkout-payment-panel { order: 3; } .cart-collaterals, .checkout-summary { position: static; } .customer-page > .woocommerce { grid-template-columns: 1fr; gap: var(--space-6); } .customer-page .woocommerce-MyAccount-navigation { position: static; } .customer-profile { display: none; } .customer-page .woocommerce-MyAccount-navigation ul { display: flex; gap: 6px; overflow-x: auto; padding: 6px; white-space: nowrap; } .customer-page .woocommerce-MyAccount-navigation a { min-height: 40px; } .customer-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .customer-page .woocommerce-Addresses { grid-template-columns: 1fr; } .customer-page .woocommerce-MyAccount-content { overflow-x: visible; } .site-header { --mobile-control: 44px; --mobile-wordmark: 148px; --mobile-brand: 32px; --mobile-gap: 10px; --mobile-padding: 12px; --mobile-logo-inset: 8px; --mobile-nav-height: calc(100dvh - 140px); --mobile-nav-pad: 20px; --mobile-nav-radius: 34px; --mobile-nav-inset: 8px; --mobile-nav-top: 6px; --mobile-nav-link-height: 60px; --mobile-nav-link-gap: 2px; --mobile-nav-size: 25px; --mobile-nav-icon: 19px; --mobile-nav-arrow-opacity: .45; --mobile-utility-size: 14px; --mobile-utility-gap: 10px; --mobile-utility-pad: 14px; --mobile-utility-top: 18px; --mobile-utility-radius: 14px; --mobile-quick-height: 48px; --mobile-quick-gap: 8px; --mobile-theme-size: 11px; --mobile-theme-icon: 18px; --mobile-theme-gap: 4px; --mobile-theme-inset: 4px; --mobile-theme-cell-gap: 2px; --mobile-theme-radius: 11px; --mobile-nav-duration: 180ms; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--mobile-gap); row-gap: 0; padding: var(--mobile-padding); min-height: calc(var(--mobile-control) + var(--mobile-padding) * 2); } .site-header .brand { grid-row: 1; grid-column: 1; min-width: 0; margin-right: auto; margin-left: var(--mobile-logo-inset); } .site-header .brand-wordmark { display: block; width: var(--mobile-wordmark); max-width: 100%; } .site-header .brand-symbol { display: none; } .auth-header .brand-wordmark { display: none; } .auth-header .brand-symbol { display: block; } .site-header .mobile-toggle { grid-row: 1; grid-column: 3; display: inline-grid; width: var(--mobile-control); min-width: var(--mobile-control); min-height: var(--mobile-control); padding: 0; border-radius: var(--pill); background: var(--ink); color: var(--bg); } .site-header .header-actions { grid-row: 1; grid-column: 2; display: none; } body[data-mobile-header="a"] .site-header .brand { width: var(--mobile-brand); } body[data-mobile-header="a"] .site-header .brand-wordmark { display: none; } body[data-mobile-header="a"] .site-header .brand-symbol { display: block; } body[data-mobile-header="a"][data-mobile-search="on"] .site-header .header-actions { display: flex; } body[data-mobile-header="a"] .site-header .header-actions > :not(.header-search-trigger) { display: none; } .site-header .header-search-trigger { width: var(--mobile-control); min-width: var(--mobile-control); min-height: var(--mobile-control); padding: 0; } body[data-header="shrink"].is-scrolled .site-header { padding-inline: var(--mobile-padding); } body[data-mobile-menu="a"] .site-header.is-menu-open { background: var(--dropdown-bg); border-color: var(--dropdown-edge); border-radius: var(--mobile-nav-radius); box-shadow: var(--dropdown-shadow); backdrop-filter: blur(var(--dropdown-blur)) saturate(var(--dropdown-saturation)); -webkit-backdrop-filter: blur(var(--dropdown-blur)) saturate(var(--dropdown-saturation)); } #primary-nav { display: none; grid-row: 2; grid-column: 1 / -1; width: 100%; max-height: min(var(--mobile-nav-height), var(--mobile-nav-available, var(--mobile-nav-height))); padding: var(--mobile-nav-top) var(--mobile-nav-inset) var(--mobile-nav-inset); overflow-y: auto; overscroll-behavior: contain; } #primary-nav.is-open { display: block; animation: menu-panel-in var(--mobile-nav-duration) ease-out; } body[data-mobile-menu="detached"] #primary-nav { position: absolute; top: calc(100% + var(--dropdown-gap)); left: 0; padding: var(--mobile-nav-pad); border: 1px solid var(--dropdown-edge); border-radius: var(--dropdown-radius); background: var(--dropdown-bg); box-shadow: var(--dropdown-shadow); backdrop-filter: blur(var(--dropdown-blur)) saturate(var(--dropdown-saturation)); -webkit-backdrop-filter: blur(var(--dropdown-blur)) saturate(var(--dropdown-saturation)); } .nav-list { flex-direction: column; gap: var(--mobile-nav-link-gap); align-items: stretch; padding: var(--mobile-nav-top) 0 var(--mobile-nav-pad); } .nav-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--mobile-utility-gap); min-height: var(--mobile-nav-link-height); padding: 0; font-family: var(--dfvn-title-font); font-size: var(--mobile-nav-size); line-height: 1.2; border-radius: 0; } .nav-list .current-menu-item > a { color: var(--muted); } .mobile-nav-arrow { display: inline-flex; flex-shrink: 0; opacity: var(--mobile-nav-arrow-opacity); } .mobile-nav-arrow .dfvn-icon { width: var(--mobile-nav-icon); height: var(--mobile-nav-icon); } .mobile-nav-utilities { display: grid; gap: var(--mobile-utility-gap); padding-top: var(--mobile-utility-top); border-top: 1px solid color-mix(in srgb, var(--line) 50%, transparent); font-size: var(--mobile-utility-size); } .mobile-nav-search { display: flex; align-items: center; gap: var(--mobile-utility-gap); width: 100%; padding: var(--mobile-utility-pad); border: 0; border-radius: var(--mobile-utility-radius); background: var(--dropdown-utility-bg); color: var(--ink); text-align: left; } .mobile-nav-search .dfvn-icon { width: var(--mobile-nav-icon); height: var(--mobile-nav-icon); flex-shrink: 0; } .mobile-nav-search .dfvn-icon:last-child { margin-left: auto; } .mobile-nav-links { display: flex; flex-wrap: wrap; gap: var(--mobile-quick-gap); } .mobile-nav-links a { display: flex; flex: 1; align-items: center; justify-content: center; gap: var(--mobile-quick-gap); min-height: var(--mobile-quick-height); padding-inline: var(--mobile-gap); border: 0; border-radius: var(--mobile-utility-radius); background: var(--dropdown-utility-bg); } .mobile-nav-links .dfvn-icon { width: var(--mobile-nav-icon); height: var(--mobile-nav-icon); flex-shrink: 0; } .mobile-nav-theme { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mobile-theme-cell-gap); padding: var(--mobile-theme-inset); border-radius: var(--mobile-utility-radius); background: var(--dropdown-utility-bg); } .mobile-nav-theme button { display: flex; justify-content: center; align-items: center; gap: var(--mobile-theme-gap); min-width: 0; min-height: var(--mobile-control); padding: var(--mobile-quick-gap) var(--mobile-theme-cell-gap); border: 0; border-radius: var(--mobile-theme-radius); background: transparent; color: var(--ink); font-size: var(--mobile-theme-size); white-space: nowrap; } .mobile-nav-theme .dfvn-icon { width: var(--mobile-theme-icon); height: var(--mobile-theme-icon); flex-shrink: 0; } .mobile-nav-theme button[aria-pressed="true"] { background: var(--ink); color: var(--bg); } .account-layout { grid-template-columns: 1fr; } .account-art { display: none; } .account-form { margin-inline: auto; width: 100%; --auth-heading-space:var(--auth-title-lead-gap); --auth-heading-size:var(--auth-title-size); --auth-heading-leading:var(--auth-title-leading); --auth-heading-tracking:var(--dfvn-title-letter-spacing); } .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-intro { grid-column: 1 / -1; max-width: 420px; } .footer-note { grid-column: 1 / -1; max-width: 450px; } } @media (max-width: 600px) { :root { --header-height:96px; --radius:14px; --card-radius:16px; --media-radius:32px; --header-offset:12px; --gutter:16px; } body[data-search-layout="modal"] .header-search-overlay { padding: 76px 12px 12px; } body[data-search-layout="modal"] .header-search-panel { max-height: calc(100dvh - 88px); padding: 18px; border-radius: 24px; } .header-search-content { max-height: calc(100dvh - 178px); padding: 18px; border-radius: 20px; } .header-search-form { --search-clear-space: 36px; gap: 10px; min-height: 76px; padding: 6px 7px 6px 15px; } .header-search-submit-long { display: none; } .header-search-submit-short { display: inline; } .header-search-form .dfvn-search-clear { right: 6px; } body[data-search-layout="modal"] .header-search-submit { min-height: 46px; padding: 10px 15px; font-size: var(--type-copy-size); } .header-search-groups { grid-template-columns: 1fr; gap: var(--space-7); } .header-search-result__visual { flex-basis: 74px; width: 74px; height: 58px; } .site-header { gap: var(--mobile-gap); padding-inline: var(--mobile-padding); } .header-actions { font-size: var(--type-copy-size); gap: 4px; } body[data-header="shrink"].is-scrolled .site-header { padding-inline: var(--mobile-padding); } .brand { font-size: 1.7rem; } .product-grid, .commerce ul.products, .contact-layout { grid-template-columns: 1fr; } .hero-slide, :is(.home-main,.shop-hero)[data-hero-size="screen"] .hero-slide { min-height: 570px; } .hero-copy { bottom: 75px; left: 24px; } .hero-copy :is(h1, h2) { font-size:var(--cover-title-size); line-height:var(--cover-title-leading); margin-block:var(--title-lead-gap); } .specimen { left: 37%; top: 6%; font-size: 230px; } .specimen span { display: none; } .slider-controls { right: 16px; bottom: 16px; } .ticker { gap: var(--space-5); } .ticker > .eyebrow { max-width: 100px; } .section-heading { align-items: start; margin-bottom:var(--heading-card-gap); } .section-heading .text-link { white-space: nowrap; margin-top: var(--space-6); font-size: var(--type-caption-size); } .intro { gap: 18px; } .footer-grid { gap: 24px 16px; } .site-footer { --footer-legal-gap: 22px; } .footer-back { margin-bottom: var(--space-8); } .auth-header .header-actions > a { display: inline; } .account-panel { padding-block: 24px; } .auth-fields-row { grid-template-columns: 1fr; } .auth-divider { font-size: var(--type-tiny-size); letter-spacing: .11em; } .dfvn-product .summary { position: static; } .footer-intro { padding-left: 0; } .woocommerce-cart-form thead { display: none; } .woocommerce-cart-form tr.cart_item { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 16px; border-bottom: 1px solid var(--line); } .woocommerce-cart-form tr.cart_item td { padding: 0; border: 0; font-size: var(--type-small-size); } .woocommerce-cart-form tr.cart_item .product-name { grid-column: 1 / -1; width: auto; } .woocommerce-cart-form tr.cart_item .product-license { grid-column: 1; } .woocommerce-cart-form tr.cart_item .product-subtotal { grid-column: 1; } .woocommerce-cart-form tr.cart_item .product-remove { grid-column: 2; grid-row: 2 / 4; } .dfvn-cart-product__image { flex-basis: 68px; width: 68px; height: 58px; } .dfvn-cart-product__copy strong { font-size: var(--type-copy-size); } .dfvn-cart-toast { --cart-toast-gap: 8px; --cart-toast-height: 64px; --cart-toast-padding: 8px 10px; --cart-toast-thumb: 32px; --cart-toast-check: 16px; --cart-toast-check-icon: 10px; --cart-toast-copy: .8rem; --cart-toast-action: .78rem; --cart-toast-action-gap: 6px; --cart-toast-action-padding: 10px; --cart-toast-action-icon: 14px; --cart-toast-close: 24px; } .dfvn-cart-toast:has(.dfvn-cart-toast__image) .dfvn-cart-toast__check { position: absolute; left: calc(var(--cart-toast-thumb-inset) + var(--cart-toast-thumb) - var(--cart-toast-check)); top: calc(50% + var(--cart-toast-thumb) / 2 - var(--cart-toast-check)); } .dfvn-cart-toast__price { display: none; } .dfvn-toast { touch-action: pinch-zoom; } .dfvn-toast :is(.dfvn-cart-toast__close, .saved-notice__close):not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .saved-notice { right: 16px; } .transaction-page .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; } .shop-search { gap: var(--space-2); } .shop-search input[name="s"] { min-width: 0; } .catalog-art { border-radius:var(--card-radius); } } @media (max-width: 640px) { .saved-account-heading { align-items: flex-start; flex-direction: column; } .saved-collection-create .saved-collection-create-fields { flex-direction: column; } .saved-collection-create .button { width: 100%; } .customer-content-heading { margin-bottom:var(--account-heading-content-gap); } .customer-welcome { display: grid; } .customer-welcome .button { justify-self: start; } .customer-dashboard-grid { grid-template-columns: 1fr; } .customer-stat { min-height: 116px; padding: 15px; } .customer-dashboard-section { padding: 20px; } .saved-account-page .saved-font-grid { grid-template-columns: 1fr; } .customer-page .woocommerce-EditAccountForm { grid-template-columns: 1fr; } .customer-page .woocommerce-EditAccountForm > :is(.form-row-wide, fieldset, p:last-of-type) { grid-column: auto; } .customer-page .woocommerce-MyAccount-content > :is(form, .woocommerce-Addresses, .woocommerce-orders-table, .woocommerce-MyAccount-downloads, .woocommerce-order, .woocommerce-Message, .woocommerce-info) { overflow-x: auto; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .site-header, .card-art img, .product-carousel-track { transition: none; } } /* Shared menus retain the native select for forms, validation and WooCommerce. */ .dfvn-select { position: relative; width: 100%; min-width: 0; } .dfvn-select-native { position: absolute; width: 1px; height: 1px; padding: 0; clip-path: inset(50%); overflow: hidden; opacity: 0; pointer-events: none; } .dfvn-select-trigger { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); text-align:left; } .dfvn-select-value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dfvn-select-chevron { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--speed); } .dfvn-select-trigger[aria-expanded="true"] .dfvn-select-chevron { transform: rotate(180deg); } .dfvn-select-trigger:disabled { opacity: .5; cursor: not-allowed; } .dfvn-select-panel { position: fixed; z-index: 10060; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 24px; background: var(--bg); color: var(--ink); box-shadow: 0 16px 48px var(--glass-shadow); } .dfvn-select-list { display: grid; gap: 3px; max-height: 196px; overflow: auto; overscroll-behavior: contain; } .dfvn-select-list::-webkit-scrollbar-track { margin-block: var(--space-4); } .dfvn-select-list::-webkit-scrollbar-thumb { border-radius: var(--pill); background: var(--line); } .dfvn-select-option { min-height: 46px; padding: 12px 16px; background: transparent; color: var(--muted); border: 0; border-radius: 14px; text-align: left; font: inherit; } .dfvn-select-option:hover, .dfvn-select-option:focus-visible { background: var(--surface); color: var(--ink); outline-offset: -2px; } .dfvn-select-option[aria-selected="true"] { color: var(--ink); font-weight:var(--font-medium,500); } .dfvn-select-option:disabled { opacity: .4; cursor: not-allowed; } .theme-options .theme-icon { flex-shrink: 0; } [data-dfvn-shop] { transition: opacity var(--speed); } [data-dfvn-shop][aria-busy="true"] { opacity: .55; cursor: progress; } :is(.product-save-button,.saved-collection-remove--icon)[data-tooltip] { position: relative; } :is(.product-save-button,.saved-collection-remove--icon)[data-tooltip]::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 10px); right: 0; width: max-content; max-width: 220px; padding: 8px 12px; border-radius: 10px; background: var(--button-bg); color: var(--button-ink); font-size: var(--type-small-size); font-weight:var(--font-regular,400); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity var(--speed), transform var(--speed); } :is(.product-save-button,.saved-collection-remove--icon)[data-tooltip]:is(:hover, :focus-visible)::after { opacity: 1; visibility: visible; transform: none; } @media (min-width: 801px) and (max-width: 1100px) { .product-reading { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-7); } } @media (max-width: 800px) { :root { --shop-heading-start-space:10px; } .shop-heading { padding-top:var(--shop-heading-start-space); --shop-heading-pad:var(--shop-heading-start-space) 0 var(--page-heading-content-gap); --shop-intro-size:var(--lead-size); } .shop-categories { gap: var(--space-2); } .shop-categories a { --category-chip-pad:9px 12px; --category-chip-size:.85rem; padding:var(--category-chip-pad); font-size:var(--category-chip-size); } } /* Passkey account controls, adapted from OTFVN Passkeys 1.2.2. */ .dfvn-auth-btn--passkey{ gap:10px; width:100%; margin-top:var(--space-3); } .dfvn-passkey-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:var(--type-emphasis-size)} .dfvn-passkey-message,.dfvn-passkeys-message{font-size:var(--type-small-size);line-height:1.5;margin-top:var(--space-2);color:var(--muted)} .dfvn-passkey-message[data-kind="error"],.dfvn-passkeys-message[data-kind="error"],.dfvn-passkeys-modal__message[data-kind="error"]{color:var(--error)} .dfvn-passkey-message[data-kind="success"],.dfvn-passkeys-message[data-kind="success"],.dfvn-passkeys-modal__message[data-kind="success"]{color:var(--focus)} .dfvn-passkey-message[data-kind="info"],.dfvn-passkeys-message[data-kind="info"],.dfvn-passkeys-modal__message[data-kind="info"]{color:var(--ink)} .dfvn-passkeys-page{--passkey-add-icon-size:14px;--passkey-close-icon-size:18px;display:flex;flex-direction:column;gap:18px} .dfvn-passkeys-head .icon-passkey-add{width:var(--passkey-add-icon-size);height:var(--passkey-add-icon-size)} .dfvn-passkeys-modal__close .icon-passkey-close{width:var(--passkey-close-icon-size);height:var(--passkey-close-icon-size)} .dfvn-passkeys-head{display:flex;gap:var(--space-4);align-items:flex-start;justify-content:space-between} .dfvn-passkeys-kicker{font-size:var(--type-small-size);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px} .dfvn-passkeys-card h2{margin:0 0 var(--card-title-copy-gap);font-size:var(--account-card-title-size);line-height:var(--account-card-title-leading);} .dfvn-passkeys-card p{ margin:0; color:var(--muted); line-height:1.65; font-size:var(--type-body-size); } .dfvn-passkeys-list{display:flex;flex-direction:column;gap:13px;margin-top:var(--space-4)} .dfvn-passkeys-empty{border:1px dashed var(--line);border-radius:16px;padding:14px;color:var(--muted);background:var(--bg)} .dfvn-passkeys-item{display:flex;align-items:center;justify-content:space-between;gap:13px;border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--bg)} .dfvn-passkeys-item__body{min-width:0} .dfvn-passkeys-item strong{display:block;color:var(--ink);font-size:var(--type-emphasis-size)} .dfvn-passkeys-item span{display:block;margin-top:6px;color:var(--muted);font-size:var(--type-small-size);line-height:1.55} .dfvn-passkeys-delete{ cursor:pointer; white-space:nowrap; } .dfvn-passkeys-modal{position:fixed;inset:0;z-index:9999} /* Stay within the viewport even when the host theme has no Bootstrap reset. */ .dfvn-passkeys-modal__dialog,.dfvn-passkeys-modal__field input{box-sizing:border-box} .dfvn-passkeys-modal__backdrop{position:absolute;inset:0;background:var(--dfvn-modal-backdrop,rgba(15,23,42,.45))} .dfvn-passkeys-modal__dialog{position:relative;z-index:1;width:min(560px,calc(100vw - 32px));margin:12vh auto 0;background:var(--bg);color:var(--ink);border-radius:24px;box-shadow:var(--dfvn-modal-shadow,0 24px 60px rgba(15,23,42,.24));padding:28px} .dfvn-passkeys-modal__close{position:absolute;top:16px;right:16px;width:36px;height:36px;border:0;background:transparent;border-radius:999px;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer} .dfvn-passkeys-modal__close:hover{background:transparent;color:var(--ink)} .dfvn-passkeys-modal__title{margin:0px;font-size:var(--type-emphasis-size);color:var(--ink)} .dfvn-passkeys-modal__desc{margin:0 0 18px;color:var(--muted);font-size:var(--type-copy-size);line-height:1.6} .dfvn-passkeys-modal__field label{display:block;margin-bottom:var(--space-2);color:var(--ink);font-size:var(--form-label-size);font-weight:var(--font-bold,700)} .dfvn-passkeys-modal__field input{ width:100%; outline:none; } .dfvn-passkeys-modal__field input:focus-visible{outline:2px solid var(--dfvn-focus-ring,#2b6cee);outline-offset:2px} .dfvn-passkeys-modal__message{min-height:22px;margin-top:10px;font-size:var(--type-small-size);line-height:1.5} .dfvn-passkeys-modal__actions{display:flex;justify-content:flex-end;gap:13px;margin-top:18px} .dfvn-passkeys-modal-open{overflow:hidden} .is-busy{opacity:.7;pointer-events:none} @media(max-width:640px){ .dfvn-passkeys-card{padding:18px} .dfvn-passkeys-head,.dfvn-passkeys-item,.dfvn-passkeys-modal__actions{flex-direction:column;align-items:stretch} .dfvn-passkeys-head .dfvn-btn,.dfvn-passkeys-delete,.dfvn-passkeys-modal__actions .dfvn-btn{ width:100%; justify-content:center; } .dfvn-passkeys-modal__dialog{margin:8vh auto 0;padding:22px 18px 18px} } .dfvn-passkeys-card { padding: 28px; border-radius: 24px; background: var(--surface); } .dfvn-security-card, .dfvn-account-security-link { padding: clamp(22px, 3vw, 36px); margin-bottom: var(--space-5); border-radius: 24px; background: var(--surface); } .dfvn-security-card h2 { font-size:var(--account-section-title-size); margin-bottom:var(--card-title-copy-gap); line-height:var(--account-section-title-leading); } .dfvn-security-card > p, .dfvn-account-security-link p { margin-bottom: var(--space-6); font-size: var(--type-body-size); line-height: 1.65; } .dfvn-security-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .dfvn-security-heading .eyebrow { margin-bottom: var(--space-3); } .dfvn-security-badge { flex-shrink: 0; padding: 8px 14px; border-radius: var(--pill); background: var(--bg); font-size: var(--type-copy-size); } .dfvn-security-form { display: grid; gap: var(--space-5); max-width: 620px; } .dfvn-security-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; } .dfvn-2fa-setup { display: flex; gap: var(--space-6); align-items: center; margin-block: var(--space-6); } [data-dfvn-qr] { flex: 0 0 224px; width: 224px; padding: 0; border-radius: 12px; overflow: hidden; background: white; } [data-dfvn-qr] canvas { display: block; max-width: 100%; height: auto; } .dfvn-2fa-key { display: block; overflow-wrap: anywhere; margin-block: var(--space-3); padding: 12px; background: var(--bg); border-radius: 10px; font-size: var(--type-answer-size); } .dfvn-recovery { margin-block: var(--space-6); padding: 24px; border-radius: 18px; background: var(--bg); } .dfvn-recovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-block: var(--space-5); } .dfvn-recovery-grid code { padding: 8px; text-align: center; border: 1px solid var(--line); border-radius: 8px; } .dfvn-login-verification > p { margin-bottom: var(--space-6); } .dfvn-login-verification form { display: grid; gap: var(--space-5); } .dfvn-login-verification .text-link { border: 0; background: transparent; color: var(--ink); } @media (max-width: 800px) { .dfvn-2fa-setup { flex-direction: column; align-items: flex-start; } .dfvn-security-heading { align-items: flex-start; } } .dfvn-account-security-link { margin-top: var(--space-5); } .dfvn-passkeys-item span, .dfvn-passkeys-message, .dfvn-passkey-message { font-size: var(--type-answer-size); } .nav-list li { position: relative; } .nav-list .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; padding: 8px; margin: 0; list-style: none; border: 1px solid var(--line); border-radius: 24px; background: var(--bg); box-shadow: var(--shadow); z-index: 42; } .nav-list li:is(:hover, :focus-within) > .sub-menu { display: grid; gap: 3px; } .nav-list .sub-menu a { display: block; padding: 12px 16px; border-radius: 14px; font-size: var(--type-body-size); } .nav-list .sub-menu a:focus-visible { background: var(--surface); } .nav-list .sub-menu .sub-menu { top: 0; left: 100%; } @media (max-width: 800px) { .nav-list .sub-menu, .nav-list .sub-menu .sub-menu { position: static; min-width: 0; margin-top: 6px; box-shadow: none; } } /* Use one variation chooser when the swatches plugin is active. */ .dfvn-product .variations td:has(.dfvn-select) .variable-items-wrapper, .dfvn-product .variations:has(.dfvn-select) .woo-selected-variation-item-name { display: none; } /* Editorial pages: imported copy stays in WordPress; layout belongs to the theme. */ /* Shared policy layout: presentation tokens remain scoped to this component. */ .policy-page { --policy-width: 1280px; --policy-prose-width: 820px; --policy-aside-width: 280px; --policy-gap: clamp(36px, 5vw, 80px); --policy-title:var(--page-title-size); --policy-title-leading:var(--page-title-leading); --policy-text:var(--type-body-size); --policy-leading:var(--article-copy-leading); --policy-section-space:var(--space-12); --policy-heading-space:var(--card-section-gap); --policy-card-padding: 22px; --policy-card-radius: 16px; --policy-toc-size: .8rem; --policy-toc-gap: 12px; --policy-h2:var(--prose-heading-size); --policy-h3:var(--prose-subheading-size); --policy-section-leading:var(--prose-heading-leading); --policy-tracking: -.045em; --policy-link-offset: .2em; --policy-anchor-margin: calc(var(--header-offset) + var(--admin-offset)); --policy-scroll-offset: calc(var(--header-height) + var(--header-offset) + var(--admin-offset)); width: min(calc(100% - var(--gutter) * 2), var(--policy-width)); margin-inline: auto; } .policy-heading { text-align: center; margin-bottom: var(--policy-heading-space); } .policy-heading h1 { margin:var(--eyebrow-title-gap) auto 0; max-width: 22ch; font-size: var(--policy-title); line-height: var(--policy-title-leading); letter-spacing: var(--policy-tracking); } .policy-heading p { margin:var(--title-lead-gap) 0 0; color: var(--muted); font-size: var(--policy-text); } .policy-layout { display: grid; grid-template-columns: minmax(0, var(--policy-prose-width)) minmax(0, var(--policy-aside-width)); gap: var(--policy-gap); align-items: start; justify-content: center; } .policy-layout--no-toc { grid-template-columns: minmax(0, var(--policy-prose-width)); } .policy-prose { width: 100%; min-width: 0; max-width: none; padding: 0; font-size: var(--policy-text); line-height: var(--policy-leading); overflow-wrap: anywhere; } .policy-prose > :first-child { margin-top: 0; } .policy-prose p, .policy-prose li { color: var(--paragraph-ink); line-height: var(--policy-leading); } .policy-prose :is(h2,h3) { margin: var(--policy-section-space) 0 var(--policy-card-padding); line-height: var(--policy-section-leading); scroll-margin-top: var(--policy-anchor-margin); } .policy-prose h2 { font-size: var(--policy-h2); } .policy-prose h3 { font-size: var(--policy-h3); } .policy-prose :is(ul,ol) { padding-left:var(--space-6); margin-block:var(--prose-list-gap); } .policy-prose li+li { margin-top:var(--prose-list-item-gap); } .policy-prose table { display:block; width:100%; max-width:100%; overflow-x:auto; border-collapse:collapse; font-size:var(--prose-table-size); line-height:var(--prose-table-leading); } .policy-prose :is(th,td) { padding:var(--prose-table-cell-space); text-align:left; vertical-align:top; border-bottom:1px solid var(--line); } .policy-prose caption { color:var(--muted); font-size:var(--prose-table-caption-size); line-height:var(--prose-caption-leading); text-align:left; } .policy-prose a { color: var(--ink); text-decoration: underline !important; text-underline-offset: var(--policy-link-offset); } .policy-aside { position: sticky; top: var(--policy-scroll-offset); } .policy-toc { border: 1px solid var(--line); border-radius: var(--policy-card-radius); padding: var(--policy-card-padding); background: var(--bg); } .policy-toc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--policy-toc-gap); cursor: pointer; list-style: none; font-weight: var(--font-heading); } .policy-toc summary::-webkit-details-marker { display: none; } .policy-toc summary .dfvn-icon { width: var(--policy-card-radius); height: var(--policy-card-radius); transition: transform var(--speed); } .policy-toc[open] summary .dfvn-icon { transform: rotate(180deg); } .policy-toc nav { max-height: calc(100dvh - var(--policy-scroll-offset) - var(--policy-heading-space)); overflow-y: auto; margin-top: var(--policy-card-padding); } .policy-toc ol { display: grid; gap: var(--policy-toc-gap); margin: 0; padding: 0; list-style: none; font-size: var(--policy-toc-size); color: var(--muted); } .policy-toc a { display: block; } .policy-toc a[aria-current] { color: var(--ink); font-weight: var(--font-heading); } .policy-toc-level-3 { padding-left: var(--policy-toc-gap); } @media (max-width: 900px) { .policy-layout { grid-template-columns: minmax(0, 1fr); } .policy-aside { position: static; order: -1; } .policy-toc nav { max-height: none; } } .prose.content-page--feature { max-width: var(--site-width); padding-top: clamp(36px, 4vw, 72px); padding-bottom: clamp(72px, 8vw, 130px); } .content-page--feature > div > p:empty { display: none; } .content-page--feature > div > section + section { margin-top: clamp(64px, 7vw, 110px); } .content-page--feature > div > section > :is(.container, .container-dfvn-ycvh, .container-dfvn-about, .container-dfvn-process, .container-dfvn-process-grid, .container-dfvn-process-faq) { max-width: 100%; } .content-page--feature :is(.dfvn-chip, .chip) { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--space-5); color: var(--muted); font-size: var(--type-small-size); font-weight:var(--font-bold,700); letter-spacing: .1em; text-transform: uppercase; } .content-page--feature :is(.dfvn-hero, .a-hero, .sp-hero) h1 { max-width: 15ch; font-size:var(--feature-title-size); line-height:var(--feature-title-leading); letter-spacing: -.06em; } .content-page--feature .lead { max-width: 780px; font-size: clamp(1.1rem, 1.55vw, 1.35rem); line-height: 1.65; } .content-page--feature h2 { font-size:var(--feature-section-size); line-height:var(--section-title-leading); } .content-page--feature :is(.btn, .dfvn-btn) { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .content-page--feature :is(.btn, .dfvn-btn):hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } /* Contact: strong introduction, useful contact details and a calm form panel. */ .contact-page { max-width:var(--site-width); padding-top:clamp(44px, 5vw, 88px); padding-bottom:clamp(64px, 7vw, 112px); } .dfvn-contact-pro .dfvn-hero { max-width:none; margin-bottom:clamp(40px, 5vw, 68px); padding-bottom:clamp(40px, 5vw, 72px); border-bottom:1px solid var(--line); } .dfvn-contact-pro .dfvn-hero .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr); column-gap: clamp(32px, 7vw, 112px); align-items: end; } .dfvn-contact-pro .dfvn-chip { grid-column: 1 / -1; color: var(--muted); font-size: var(--type-copy-size); font-weight:var(--font-semibold,600); } .dfvn-contact-pro .dfvn-chip svg { width: 21px; height: 21px; } .dfvn-contact-pro .dfvn-hero .lead { grid-column: 2; max-width: 24ch; margin: 0 0 10px; font-size: clamp(1.15rem, 1.7vw, 1.65rem); line-height: 1.55; } .dfvn-contact-pro .c-main > .grid { display:grid; grid-template-columns:minmax(0, .88fr) minmax(0, 1fr); gap:clamp(40px, 6vw, 96px); align-items:start; } .dfvn-contact-pro .card { min-width: 0; } .dfvn-contact-pro .card.left { padding: 10px 0; } .dfvn-contact-pro .card.left h2 { max-width: 14ch; margin-bottom:var(--title-lead-gap); font-size:var(--section-title-size); line-height:var(--section-title-leading); } .dfvn-contact-pro .card.left > .lead { max-width: 60ch; margin-bottom: var(--space-12); font-size: var(--type-body-size); } .dfvn-contact-pro .card.left :is(.info, .social) { padding-top: 26px; border-top: 1px solid var(--line); } .dfvn-contact-pro .card.left .social { margin-top: 34px; } .dfvn-contact-pro .card.left h3 { margin:0 0 var(--card-title-copy-gap); font-size:var(--compact-title-size); font-weight:var(--font-bold,700); line-height:var(--compact-title-leading); } .dfvn-contact-pro .list { list-style:none; padding:0; display:grid; gap:0; font-size:var(--type-body-size); counter-reset:contact; } .dfvn-contact-pro .list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); overflow-wrap: anywhere; gap: 14px; align-items: center; min-height: 58px; padding: 10px 0; border-top: 1px solid var(--line); line-height: 1.5; } .dfvn-contact-pro .list li:first-child { border-top: 0; } .dfvn-contact-pro .list li::before { content: '0' counter(contact); counter-increment: contact; color: var(--muted); font-size: var(--type-small-size); font-weight:var(--font-bold,700); } .dfvn-contact-pro .list li i { display: none; } .dfvn-contact-pro .contact-social-links { gap: 9px; } .dfvn-contact-pro .contact-social-links a { display: inline-flex; align-items: center; gap: var(--space-2); padding: 9px 14px; border-radius: var(--pill); background: var(--surface); color: var(--ink); font-size: var(--type-copy-size); text-decoration: none; } .dfvn-contact-pro .contact-social-links a:hover { opacity: var(--hover-opacity); } .dfvn-contact-pro .card.right { background:var(--surface); padding:clamp(26px, 4vw, 56px); border-radius:30px; } .dfvn-contact-pro .card.right h2 { margin:0 0 var(--heading-card-gap); font-size:var(--section-title-size); line-height:var(--section-title-leading); } .dfvn-contact-pro .wpcf7-form > p { margin: 0 0 14px; } .dfvn-contact-pro .wpcf7-form textarea { min-height: 170px; resize: vertical; } .dfvn-contact-pro .wpcf7-response-output { margin: 20px 0 0; padding: 14px 18px; border-radius: 12px; } /* The embedded Turnstile challenge is 300px wide; scale it intact on narrow phones. */ @media (max-width: 380px) { .dfvn-contact-pro .wpcf7-turnstile { zoom: .75; } } /* Custom font service: open up the old 900px article and establish hierarchy. */ .dfvn-vh .dfvn-hero { padding: clamp(32px, 5vw, 76px); border-radius: 32px; background: var(--surface); } .dfvn-vh .dfvn-hero .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .68fr); gap: 22px clamp(28px, 5vw, 84px); align-items: start; } .dfvn-vh .dfvn-hero .dfvn-chip, .dfvn-vh .dfvn-hero h1, .dfvn-vh .dfvn-hero .lead, .dfvn-vh .dfvn-hero .dfvn-cta { grid-column: 1; } .dfvn-vh .dfvn-hero .dfvn-bullets { grid-column: 2; grid-row: 2 / 5; margin: 12px 0 0; padding: 0; gap: var(--space-3); } .dfvn-vh .dfvn-hero .dfvn-bullets li { padding: 18px 0; border-top: 1px solid var(--line); font-size: var(--type-label-size); line-height: 1.45; } .dfvn-vh .dfvn-hero .dfvn-bullets svg { width: 22px; height: 22px; } .dfvn-vh .dfvn-hero h1 { max-width: 12ch; margin: 0; } .dfvn-vh .dfvn-hero .lead { margin: 0; } .dfvn-vh .dfvn-hero .dfvn-cta { margin: 8px 0 0; } .dfvn-vh .dfvn-hero .dfvn-badges { grid-column: 1 / -1; display: flex; gap: 10px; margin: 22px 0 0; padding-top: 24px; border-top: 1px solid var(--line); } .dfvn-vh .dfvn-hero .b { padding: 8px 14px; border-radius: var(--pill); background: var(--bg); color: var(--muted); font-size: var(--type-small-size); } .dfvn-vh > section + section { margin-top:70px; padding-top:0; border-top:0; } .dfvn-vh .dfvn-benefits .dfvn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .dfvn-vh .dfvn-benefits .left { padding: 0; } .dfvn-vh .dfvn-benefits .left h2 { margin: 0 0 22px; } .dfvn-vh .dfvn-benefits .left p { max-width: 60ch; margin: 0 0 20px; } .dfvn-vh .dfvn-benefits .left ul { padding-left: 20px; margin: 24px 0; color: var(--ink); } .dfvn-vh .dfvn-benefits .left li { padding: 6px 0; line-height: 1.5; } .dfvn-vh .dfvn-benefits .right { display: grid; gap: 10px; padding: 0; } .dfvn-vh .dfvn-benefit { display:flex; align-items:start; gap:18px; margin-top:var(--space-7); margin:0; padding:22px; border-radius:18px; background:var(--surface); } .dfvn-vh .dfvn-benefit .dfvn-badge { flex: 0 0 32px; } .dfvn-vh .dfvn-benefit :is(svg, .dfvn-badge) { width: 30px; height: 30px; } .dfvn-vh .dfvn-benefit strong { display: block; font-size: var(--type-label-size); } .dfvn-vh .dfvn-benefit .sub { margin-top: 7px; line-height: 1.55; } .dfvn-vh .dfvn-process, .dfvn-vh .dfvn-faq { padding-top: 50px; border-top: 1px solid var(--line); } .dfvn-vh .dfvn-process h2, .dfvn-vh .dfvn-faq h2 { margin-bottom: 18px; } .dfvn-vh .dfvn-steps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-block:var(--space-6); margin-top:34px; } .dfvn-vh .dfvn-step { padding:24px; background:var(--surface); border-radius:20px; font-size:var(--type-copy-size); min-height:175px; line-height:1.6; } .dfvn-vh .dfvn-step strong { display: block; margin-bottom: var(--space-3); font-size: var(--type-small-size); letter-spacing: .1em; text-transform: uppercase; } .dfvn-vh .quytrinhvh-dfvn { margin-top: 22px; font-size: var(--type-answer-size); } .dfvn-vh #contact { padding: clamp(28px, 5vw, 70px); border-radius: 28px; background: var(--surface); } .dfvn-vh .dfvn-card-contact { max-width: 880px; margin-inline: auto; } .dfvn-vh #contact .wpcf7-form textarea { min-height: 170px; } @media (max-width: 900px) { .dfvn-contact-pro .dfvn-hero .container, .dfvn-contact-pro .c-main > .grid, .dfvn-vh .dfvn-hero .container, .dfvn-vh .dfvn-benefits .dfvn-grid { grid-template-columns: minmax(0, 1fr); } .dfvn-contact-pro .dfvn-hero .lead, .dfvn-vh .dfvn-hero .dfvn-bullets, .dfvn-vh .dfvn-hero .dfvn-badges { grid-column: 1; grid-row: auto; } .dfvn-contact-pro .dfvn-hero .lead { margin-top: 22px; } .dfvn-vh .dfvn-hero h1 { max-width: none; } .dfvn-vh .dfvn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .contact-page { padding-top: 28px; } .dfvn-contact-pro h1 { font-size:var(--page-title-size); line-height:var(--page-title-leading); } .dfvn-contact-pro .card.left > .lead { margin-bottom: 30px; } .dfvn-contact-pro .card.right { padding: 24px; } .content-page--feature .dfvn-vh .dfvn-hero { padding: 28px 22px; } .dfvn-vh .dfvn-steps { grid-template-columns: 1fr; } } /* Keep spacing between imported sections even when WordPress adds empty paragraphs. */ .content-page--feature > div > section:not(:first-of-type) { margin-top: clamp(64px, 7vw, 110px); padding-top: clamp(40px, 5vw, 76px); border-top: 1px solid var(--line); } .content-page--feature > div > section > :is(.container, .container-dfvn-about, .container-dfvn-process, .container-dfvn-process-grid, .container-dfvn-process-faq) > h2 { margin-bottom: var(--space-6); } .content-page--feature > div > section p { max-width: 76ch; line-height: 1.75; } .content-page--feature > div > section :is(.grid, .grid-2, .steps) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); } .content-page--feature > div > section :is(.card, .step) { min-width: 0; padding: clamp(22px, 3vw, 38px); border-radius: 22px; background: var(--surface); } .content-page--feature > div > section :is(.card, .step) h3 { margin-bottom:var(--card-title-copy-gap); font-size:var(--card-title-size); font-weight:var(--font-semibold,600); line-height:var(--card-title-leading); } .content-page--feature > div > section .checks { display: grid; gap: 10px; margin: 22px 0; padding-left: 23px; } .content-page--feature > div > section .checks li { line-height: 1.55; } .content-page--feature > div > section :is(.badges, .actions, .toc) { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 22px; } .content-page--feature > div > section a:not(.btn, .dfvn-btn) { text-underline-offset: 4px; } .dfvn-vh > section:not(:first-of-type) { border-top: 0; padding-top: 0; } .dfvn-vh > .dfvn-process, .dfvn-vh > .dfvn-faq { padding-top: 50px; border-top: 1px solid var(--line); } @media (max-width: 700px) { .content-page--feature > div > section :is(.grid, .grid-2, .steps) { grid-template-columns: 1fr; } .content-page--feature > div > section:not(:first-of-type) { margin-top: 54px; padding-top: 36px; } } .content-page--feature :is(pre, code) { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; } /* About: a clear bilingual story, restrained cards, and a strong closing mark. */ .content-page--feature:has(.dfvn-about-pro) { max-width: var(--site-width); padding-top: 26px; } .dfvn-about-pro { --about-gap: clamp(48px, 7vw, 108px); } .dfvn-about-pro > section:not(:first-of-type) { margin-top: var(--about-gap) !important; padding-top: 0 !important; border-top: 0 !important; } .dfvn-about-pro .a-hero { position: relative; overflow: hidden; min-height: 450px; padding: clamp(36px, 6vw, 88px); border-radius: 30px; background: var(--surface); isolation: isolate; } .dfvn-about-pro .a-hero::after { content: 'Aa'; position: absolute; right: -1%; bottom: -24%; z-index: -1; color: color-mix(in srgb, var(--ink) 7%, transparent); font-size: clamp(250px, 38vw, 620px); font-weight:var(--font-extrabold,800); line-height: .8; letter-spacing: -.15em; } .dfvn-about-pro .a-hero .container-dfvn-about { position: relative; max-width: 980px; } .dfvn-about-pro .a-hero h1 { max-width: none; font-size:var(--feature-poster-title-size); line-height:var(--feature-poster-title-leading); } .dfvn-about-pro .a-hero .lead { max-width: 65ch; margin: 30px 0 0; color: var(--ink); font-size: clamp(1.18rem, 1.9vw, 1.65rem); line-height: 1.5; } .dfvn-about-pro .a-hero .badges { margin: 38px 0 0; gap: var(--space-2); } .dfvn-about-pro .a-hero .badges span { padding: 10px 15px; border-radius: var(--pill); background: var(--bg); font-size: var(--type-small-size); font-weight:var(--font-semibold,600); } .dfvn-about-pro .a-highlights .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); } .dfvn-about-pro .a-highlights .card { min-height: 320px; padding: clamp(26px, 3vw, 42px); border: 0; border-radius: 24px; background: var(--surface); } .dfvn-about-pro .a-highlights .card:first-child { background: var(--button-bg); color: var(--button-ink); } .dfvn-about-pro .a-highlights .card:first-child p { color: color-mix(in srgb, var(--bg) 75%, transparent); } .dfvn-about-pro .a-highlights .icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 36px; border-radius: 14px; background: var(--bg); } .dfvn-about-pro .a-highlights h3 { max-width: 19ch; font-size:var(--card-title-size); font-weight:var(--font-semibold,600); line-height:var(--card-title-leading); } .dfvn-about-pro .a-highlights p { margin-top: var(--space-4); font-size: var(--type-body-size); line-height: 1.65; } .dfvn-about-pro .a-lang { max-width: 1120px; margin-inline: auto; } .dfvn-about-pro .a-lang .tabs { max-width: none; } .dfvn-about-pro .lang-switch { display: flex; width: max-content; max-width: 100%; gap: 4px; padding: 5px; margin-bottom: 42px; border-radius: var(--pill); background: var(--surface); } .dfvn-about-pro .tab-btn { padding: 12px 22px; border: 0; border-radius: var(--pill); background: transparent; color: var(--muted); font-weight:var(--font-semibold,600); } .dfvn-about-pro .tab-btn.active { background: var(--button-bg); color: var(--button-ink); } .js-about-tabs .dfvn-about-pro .a-lang .panel:not(.active) { display: none; } .dfvn-about-pro .a-lang .panel > p:first-child { max-width: 60ch; margin-bottom: 52px; color: var(--ink); font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.55; } .dfvn-about-pro .a-lang .panel h2 { max-width: 18ch; padding-top: 42px; margin: 48px 0 20px; border-top: 1px solid var(--line); font-size:var(--section-title-size); line-height:var(--section-title-leading); } .dfvn-about-pro .a-lang .panel p { max-width: 75ch; font-size: var(--type-body-size); line-height: 1.75; } .dfvn-about-pro .a-lang .checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 24px 0 0; padding: 0; list-style: none; } .dfvn-about-pro .a-lang .checks li { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 20px; border-radius: 16px; background: var(--surface); line-height: 1.55; } .dfvn-about-pro .a-lang .checks svg { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--ink); stroke-width: 2; } .dfvn-about-pro .a-lang .checks .txt { min-width: 0; } .dfvn-about-pro .a-lang .checks strong { display: block; } .dfvn-about-pro .a-lang .cta-note { margin-top: 42px; } .dfvn-about-pro .a-stats { padding: clamp(34px, 5vw, 66px); border-radius: 28px; background: var(--button-bg); color: var(--button-ink); } .dfvn-about-pro .a-stats .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--card-gap); } .dfvn-about-pro .a-stats .stat { display: grid; gap: 10px; } .dfvn-about-pro .a-stats .num { font-size: clamp(2.3rem, 4vw, 4.5rem); font-weight:var(--font-semibold,600); letter-spacing: -.06em; line-height: 1; } .dfvn-about-pro .a-stats .label { color: color-mix(in srgb, var(--bg) 67%, transparent); font-size: var(--type-copy-size); } .dfvn-about-pro .a-cta .actions { justify-content: center; gap: var(--space-3); } .dfvn-about-pro .a-cta .btn { min-width: 180px; } /* Journal listing: one editorial lead, then compact readable cards. */ .journal-listing { max-width: var(--site-width); padding-top: clamp(34px, 5vw, 82px); } .journal-listing__header { display: grid; justify-items: center; gap:var(--heading-card-gap); margin:0 auto var(--page-heading-content-gap); text-align: center; } .journal-listing__header .eyebrow { margin-bottom:var(--eyebrow-title-gap); color: var(--muted); } .journal-listing__header h1 { font-size:var(--page-title-size); } .journal-listing__header p { max-width: 57ch; margin:var(--title-lead-gap) auto 0; font-size:var(--lead-size); line-height:var(--lead-leading); } .journal-search { display: flex; align-items: center; gap: var(--space-3); width: min(100%, 620px); } .journal-search > .dfvn-icon { flex: 0 0 auto; font-size: 1.2rem; } .journal-listing .journal-search input[type="search"] { flex: 1; min-width: 0; outline: 0; } .journal-search input[type="search"]:focus-visible { outline: 0; } .journal-search button { min-width: 70px; } .journal-search[aria-busy="true"] button { opacity: .65; } .journal-search-status { margin: -18px auto 24px; text-align: center; font-size: var(--type-copy-size); } .journal-categories { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: clamp(38px, 5vw, 70px); } .journal-categories a { padding: 10px 17px; border-radius: var(--pill); background: var(--surface); font-size: var(--type-copy-size); font-weight:var(--font-medium,500); } .journal-categories a[aria-current="page"] { background: var(--button-bg); color: var(--button-ink); } .journal-card { min-width: 0; } .journal-card__image { display: block; aspect-ratio: 1.55; overflow: hidden; border-radius:var(--card-radius); background: var(--surface); } .journal-card__image img { width: 100%; height: 100%; object-fit: cover; } .journal-card__placeholder { display: grid; place-items: center; height: 100%; font-size: clamp(5rem, 10vw, 9rem); font-weight:var(--font-bold,700); letter-spacing: -.12em; } .journal-card__copy { padding-top: 20px; } .journal-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-bottom: var(--space-3); color: var(--muted); font-size: var(--type-meta-size); font-weight:var(--font-semibold,600); letter-spacing: .04em; } .journal-card__meta span { color: var(--ink); } .journal-card h2, .journal-card h3 { font-size:var(--card-title-size); line-height:var(--card-title-leading); letter-spacing: -.035em; } .journal-card p { margin-top: var(--space-3); font-size: var(--type-answer-size); line-height: 1.55; } .journal-card .journal-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; height: 3.1em; overflow: hidden; } .journal-card__read { display: inline-block; margin-top: var(--space-5); color: var(--link); font-size: var(--type-copy-size); font-weight:var(--font-semibold,600); } .journal-latest { margin-top: clamp(20px, 3vw, 42px); } .journal-latest__heading { margin-bottom: 30px; } .journal-latest__heading .eyebrow { margin-bottom: 10px; color: var(--muted); } .journal-latest__heading h2 { font-size:var(--section-title-size); line-height:var(--section-title-leading); } .journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); } .journal-pagination { margin-top: clamp(52px, 7vw, 90px); } .journal-pagination ul.page-numbers { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: max-content; max-width: 100%; gap: 4px; padding: 6px; margin: 0 auto; border-radius: var(--pill); background: var(--surface); list-style: none; } .journal-pagination a, .journal-pagination span { display: grid; place-items: center; min-width: 46px; min-height: 46px; padding: 8px 13px; border-radius: var(--pill); background: transparent; font-size: var(--type-label-size); font-weight:var(--font-semibold,600); } .journal-pagination a.next, .journal-pagination a.prev { gap: 0; } .journal-pagination a.next span[aria-hidden], .journal-pagination a.prev span[aria-hidden] { min-width: 0; min-height: 0; padding: 0; font-size: 1.45rem; line-height: 1; } .journal-pagination .current { background: var(--button-bg); color: var(--button-ink); } .navigation.pagination .nav-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: max-content; max-width: 100%; gap: 4px; padding: 6px; margin: 34px auto; border-radius: var(--pill); background: var(--surface); } .navigation.pagination .nav-links :is(a, span) { display: grid; place-items: center; min-width: 46px; min-height: 46px; padding: 8px 13px; border-radius: var(--pill); font-size: var(--type-label-size); font-weight:var(--font-semibold,600); } .navigation.pagination .nav-links .current { background: var(--button-bg); color: var(--button-ink); } .journal-empty { padding: 70px 20px; border-radius:var(--card-radius); background: var(--surface); text-align: center; } /* Articles: full reading column or a sticky contents rail. */ .journal-article { padding-top: clamp(28px, 4vw, 70px); } .journal-article__header { max-width: 1140px; margin:0 auto var(--article-heading-content-gap); text-align: center; } .journal-article__meta { display: flex; justify-content: center; align-items:center; flex-wrap: wrap; gap: 8px 12px; margin:24px 0 0; color: var(--muted); font-size: var(--type-copy-size); } .journal-article__meta .journal-save-button { position:relative; flex:none; gap:6px; width:auto; min-height:32px; padding:4px 5px; border:0; border-radius:0; background:transparent; color:var(--ink); font:inherit; white-space:nowrap; } .journal-article__meta .journal-save-button>.dfvn-icon { width:18px; height:18px; } .journal-article__meta .journal-save-button:hover { background:transparent; opacity:var(--button-hover-opacity,var(--hover-opacity)); } .journal-article__meta .journal-save-button.is-saved { background:transparent; color:var(--ink); } @media (pointer:coarse) { .journal-article__meta .journal-save-button::before { content:""; position:absolute; inset:-6px -7px; } } .journal-article__meta-item { display:inline-flex; align-items:center; gap:var(--space-3); white-space:nowrap; } .journal-article__meta-dot { flex:0 0 5px; width:5px; height:5px; } .journal-article__meta-dot circle { fill:currentColor; stroke:none; } .journal-article__meta > span:first-child { color: var(--ink); } .journal-article__header h1 { font-size:var(--article-title-size); line-height:var(--article-title-leading); } .journal-article__intro { max-width: 65ch; margin:var(--article-title-lead-gap) auto 0; font-size:var(--article-intro-size); line-height:var(--article-intro-leading); } .journal-article__hero { max-width: var(--site-width); margin: 0 auto clamp(44px, 6vw, 88px); } .journal-article__hero img { display: block; width: auto; height: auto; max-width: 100%; object-fit: contain; margin-inline: auto; border-radius:var(--card-radius); } .journal-article__hero figcaption { padding: 12px 4px; color: var(--muted); font-size: var(--type-small-size); text-align: center; } .journal-article__layout { max-width: 1240px; margin: 0 auto; } .journal-article--wide .journal-article__body { max-width: 860px; margin: 0 auto; } .journal-article--sidebar .journal-article__layout { display: grid; grid-template-columns: minmax(0, 820px) minmax(250px, 300px); gap: clamp(32px, 5vw, 88px); align-items: start; } .journal-article__sidebar { position: sticky; top: calc(var(--header-height) + 24px); max-height: calc(100vh - var(--header-height) - 35px); overflow: auto; } .journal-toc, .article-toc { padding: clamp(20px, 2.5vw, 30px); border-radius: 22px; background: var(--surface); } .article-toc__label { display: flex; align-items: center; justify-content: space-between; gap:var(--space-4); color: var(--ink); font-size:var(--compact-title-size); line-height:var(--compact-title-leading); font-weight:var(--font-bold,700); cursor: pointer; list-style: none; } .article-toc__label::-webkit-details-marker { display: none; } .article-toc__chevron { flex: 0 0 auto; width: 18px; height: 18px; transition: transform var(--speed); } .article-toc[open] .article-toc__chevron { transform: rotate(180deg); } .article-toc nav { margin-top: var(--space-4); } .article-toc ol { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; } .article-toc li a { display: flex; gap: 13px; padding: 5px 0; color: var(--ink); font-size: var(--type-answer-size); line-height: 1.42; text-decoration: none; } .article-toc li a:hover { opacity: var(--hover-opacity); } .article-toc li a span { flex: 0 0 22px; color: var(--muted); font-size: var(--type-small-size); font-weight:var(--font-bold,700); } .article-toc__level-3 { padding-left: 20px; } .journal-article--wide .article-toc { margin-bottom: clamp(38px, 5vw, 70px); } .journal-sidebar-related { display: grid; gap: 15px; padding: 28px 8px; } .journal-sidebar-related a { padding-bottom: 15px; border-bottom: 1px solid var(--line); font-size: var(--type-answer-size); font-weight:var(--font-semibold,600); line-height: 1.45; } .journal-prose { --article-table-bg: var(--bg); --article-table-stripe: color-mix(in srgb, var(--surface) 65%, var(--bg)); --article-table-head-bg: var(--ink); --article-table-head-ink: var(--bg); --article-table-line: var(--line); --article-table-radius: var(--field-radius); --article-table-cell-space:var(--prose-table-cell-space); --article-table-size:var(--prose-table-size); --article-table-min-width: 600px; overflow-wrap: anywhere; font-size:var(--article-copy-size); line-height:var(--article-copy-leading); } .dfvn-download { margin-block: var(--download-space); text-align: var(--download-align); } :is(.dfvn-download a, a.download-button, .button.dfvn-download-button, a.button[download], .dfvn-download-actions .button, .dfvn-order-file .download-file .button, .dfvn-received-details .download-file a, .dfvn-received-details .woocommerce-MyAccount-downloads-file, .dfvn-download-bundle .button, .dfvn-bundle-action .button) { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; text-decoration: none; white-space: normal; overflow-wrap: anywhere; } :is(.dfvn-download a, a.download-button, .button.dfvn-download-button, a.button[download], .dfvn-download-actions .button, .dfvn-order-file .download-file .button, .dfvn-download-bundle .button, .dfvn-bundle-action .button) .dfvn-icon { flex-shrink: 0; width: var(--download-icon-size); height: var(--download-icon-size); } .journal-prose :is(.dfvn-download a, a.download-button):hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } .journal-prose > * + * { margin-top:var(--article-paragraph-gap); } .journal-prose p, .journal-prose li { line-height:var(--article-copy-leading); } .journal-prose :is(h2, h3) { scroll-margin-top: calc(var(--header-height) + 24px); margin-top:var(--article-section-gap); margin-bottom:var(--prose-heading-copy-gap); line-height:var(--prose-heading-leading); } .journal-prose h2 { font-size:var(--article-h2-size); } .journal-prose h3 { font-size:var(--article-h3-size); font-weight:var(--font-semibold,600); } .journal-prose :is(ul, ol) { padding-left:var(--space-6); } .journal-prose li + li { margin-top:var(--prose-list-item-gap); } .journal-prose a { text-decoration: underline; text-underline-offset: 4px; } .journal-prose :is(img, video) { max-width: 100%; height: auto; border-radius: 18px; } .journal-prose :is(iframe, .wp-video, .wp-block-embed, .fluid-width-video-wrapper) { display: block; width: 100%; max-width: 100%; } .journal-prose iframe { aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 16px; } .journal-prose :is(figure, .wp-caption) { max-width: 100%; margin-inline: 0; } .journal-prose :is(figcaption, .wp-caption-text) { margin-top: 10px; color: var(--muted); font-size: var(--type-small-size); text-align: center; } .journal-prose pre { max-width: 100%; overflow-x: auto; } .journal-prose abbr[title] { border: 0; text-decoration: none; cursor: help; } .journal-prose :is(.table-wrapper, .wp-block-table) { max-width: 100%; overflow-x: auto; border: 1px solid var(--article-table-line); border-radius: var(--article-table-radius); } .journal-prose table { width: 100%; border-collapse: collapse; background: var(--article-table-bg); color: var(--ink); font-size:var(--article-table-size); line-height:var(--prose-table-leading); } .journal-prose :is(.table-wrapper, .wp-block-table) table { min-width: var(--article-table-min-width); } .journal-prose :is(th, td) { padding: var(--article-table-cell-space); border: 0; border-bottom: 1px solid var(--article-table-line); text-align: left; vertical-align: top; text-transform: none; } .journal-prose thead th { background: var(--article-table-head-bg); color: var(--article-table-head-ink); font-weight:var(--font-semibold,600); } .journal-prose tbody tr:nth-child(even) > :is(th, td) { background: var(--article-table-stripe); } .journal-prose tbody tr:last-child > :is(th, td) { border-bottom: 0; } .journal-prose caption { caption-side: top; padding:var(--article-table-cell-space); color:var(--muted); font-size:var(--prose-table-caption-size); line-height:var(--prose-caption-leading); text-align: left; } .journal-prose blockquote { margin-inline: 0; padding: 22px 30px; border-left: 4px solid var(--ink); background: var(--surface); font-size: 1.15rem; } .dfvn-notice { position: relative; margin: 28px 0; padding: 18px 22px; border-radius: 18px; line-height: 1.55; } .dfvn-notice-inner { display: flex; align-items: flex-start; gap: 14px; } .dfvn-notice-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; } .dfvn-notice-icon svg { width: 21px; height: 21px; } .dfvn-notice-content { min-width: 0; font-size: var(--type-body-size); } .dfvn-notice-content strong { display: block; font-weight:var(--font-bold,700); } .dfvn-notice--gold { background: radial-gradient(circle at 0% 0%, #fffaf0 0%, #fff4d8 44%, #fde9b0 100%); color: #4a2a00; } .dfvn-notice--gold .dfvn-notice-icon { background: #ffe6ad; color: #795000; } .dfvn-notice--gold a { color: #4a2a00; text-decoration-thickness: 1px; } .journal-article .post-navigation { margin-top: 70px; } .journal-article .post-navigation .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .journal-article .post-navigation .nav-links > * { display: flex; min-width: 0; } .journal-article .post-navigation a span { color: var(--muted); font-size: var(--type-small-size); font-weight:var(--font-medium,500); } .journal-related { max-width: var(--site-width); margin: clamp(80px, 10vw, 150px) auto 0; } @media (max-width: 1100px) { .journal-article--sidebar .journal-article__layout { grid-template-columns: minmax(0, 1fr) 250px; gap: var(--space-7); } } @media (max-width: 800px) { .dfvn-about-pro .a-highlights .grid { grid-template-columns: 1fr 1fr; } .dfvn-about-pro .a-stats .grid { grid-template-columns: 1fr 1fr; } .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .journal-article--sidebar .journal-article__layout { display: flex; flex-direction: column; } .journal-article__sidebar { position: static; order: -1; width: 100%; max-height: none; } } @media (max-width: 600px) { .dfvn-about-pro .a-hero { min-height: 380px; padding: 38px 25px; } .dfvn-about-pro .a-hero h1 { font-size:var(--feature-poster-title-size); line-height:var(--feature-poster-title-leading); } .dfvn-about-pro .a-highlights .grid, .dfvn-about-pro .a-lang .checks { grid-template-columns: 1fr; } .dfvn-about-pro .a-highlights .card { min-height: 0; } .dfvn-about-pro .a-stats { padding: 28px; } .journal-listing__header h1 { font-size:var(--page-title-size); } .journal-grid { grid-template-columns: 1fr; } .journal-card__image { border-radius:var(--card-radius); } .journal-article__header h1 { font-size:var(--article-title-size); line-height:var(--article-title-leading); } .journal-article__hero img { border-radius:var(--card-radius); } .journal-article .post-navigation .nav-links { grid-template-columns: 1fr; } } /* Keep the scrollbar inside the rounded results surface. */ .header-search-content::-webkit-scrollbar { width: 3px; } .header-search-content::-webkit-scrollbar-track, .header-search-panel::-webkit-scrollbar-track { margin-block: var(--dropdown-radius); } .header-search-content::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } body[data-search-layout="inline"] .header-search-form { width: 100%; } body[data-search-layout="inline"] .header-search-inline-close { margin-left: auto; } @media (max-width: 800px) { .dfvn-received-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dfvn-received-overview > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); } .dfvn-received-overview > div:nth-child(4) { border-top: 1px solid var(--line); } .transaction-page .dfvn-received-gateway .sepay-pay-info { grid-template-columns: 1fr; } .transaction-page .dfvn-received-gateway .qr-box { border-left: 0; border-top: 1px solid var(--line); } } @media (max-width: 600px) { .dfvn-received-hero { align-items: center; } .dfvn-received-mark { flex-basis: 48px; width: 48px; height: 48px; font-size: 1.35rem; } .dfvn-received-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dfvn-received-overview > div { padding: 18px 12px; } .dfvn-received-overview > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); } .dfvn-received-overview > div:nth-child(4) { border-top: 1px solid var(--line); } .dfvn-received-gateway .bank-info-row { gap: 2px; } .dfvn-received-gateway .bank-info-cell { padding: 11px 9px !important; font-size: var(--type-small-size); } .dfvn-received-details { overflow-x: auto; } .dfvn-orders-head, .dfvn-order-card-foot { align-items: start; flex-direction: column; } .dfvn-order-actions { width: 100%; } .dfvn-order-action { flex: 1; } .dfvn-download-card { grid-template-columns:28px minmax(0,1fr); align-items:start; gap:var(--space-3); padding:18px; } .dfvn-download-icon { width:28px; height:28px; } .dfvn-download-actions { grid-column:2; justify-self:start; } .dfvn-download-toolbar .account-download-search { grid-template-columns:minmax(0,1fr) auto; width:100%; flex-basis:100%; } .dfvn-downloads-search { grid-column:1/-1; } .dfvn-downloads-count,.dfvn-orders-count { font-size:var(--type-meta-size); margin-left:8px; } } /* Inline links use color instead of underlines; button colors remain component-specific. */ :is(.text-link, .prose a:not(:where(.button, .btn, .dfvn-btn, [role="button"])), .journal-prose a:not(:where(.button, .download-button, .dfvn-download a)), .account-form p a, .field-heading a, .product-help a, .checkout-panel-heading a, .woocommerce-privacy-policy-text a, .woocommerce-terms-and-conditions a, .dfvn-download-order, .woocommerce-info a:not(.button), .woocommerce-message a:not(.button), .woocommerce-error a:not(.button)) { color: var(--link); } :is(.text-link, .prose a:not(:where(.button, .btn, .dfvn-btn, [role="button"])), .journal-prose a:not(:where(.button, .download-button, .dfvn-download a)), .account-form p a, .field-heading a, .product-help a, .checkout-panel-heading a, .woocommerce-privacy-policy-text a, .woocommerce-terms-and-conditions a, .dfvn-download-order, .woocommerce-info a:not(.button), .woocommerce-message a:not(.button), .woocommerce-error a:not(.button)):hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } /* Shared brand assets and interaction tokens. */ .brand-symbol { display: none; width: var(--brand-symbol-size); height: var(--brand-symbol-size); } .brand-wordmark { display: block; width: 180px; aspect-ratio: 2794.6929 / 429.9087; } button:not(:disabled):hover { opacity: var(--button-hover-opacity,var(--hover-opacity)); } .woocommerce-cart-form tbody td { border-bottom: 0; } .cart_totals .order-total :is(th, td) { border-bottom: 0; } .woocommerce-cart .transaction-page:has(.wc-empty-cart-message) > .transaction-heading { display: none; } .transaction-page #place_order::after { content: ''; width: 17px; height: 17px; flex: 0 0 17px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dfvn-spin .8s linear infinite; display: none; } .transaction-page form.checkout.processing #place_order::after, .transaction-page #place_order[aria-busy="true"]::after { display: block; } @keyframes dfvn-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .transaction-page #place_order::after { animation-duration: 2s; } } @media (max-width: 600px) { .brand-wordmark { width: 128px; } } /* Payment presentation uses the gateway's actual bank data and polling. */ .dfvn-received-card.is-pending { border: 1px solid var(--line); border-radius: 26px; } .dfvn-received-card.is-pending .dfvn-received-overview { background: var(--bg); } .dfvn-native-gateway { display: none; } .dfvn-payment-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); padding: clamp(24px, 4vw, 46px); } .dfvn-payment-grid h2 { margin:0 0 var(--card-title-copy-gap); font-size:var(--form-section-title-size); line-height:var(--form-section-title-leading); letter-spacing: -.02em; font-weight:var(--font-medium,500); } .dfvn-payment-bank { display: flex; align-items: center; gap: 14px; margin-bottom: var(--space-7); } .dfvn-payment-bank img { width: 64px; height: 40px; object-fit: contain; padding: 8px; border-radius: 10px; background: var(--button-bg); } .dfvn-payment-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: var(--type-meta-size); letter-spacing: .06em; text-transform: uppercase; } .dfvn-payment-bank strong { font-size: 1.4rem; font-weight:var(--font-medium,500); } .dfvn-payment-field { margin-bottom: 18px; } .dfvn-payment-value { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .dfvn-payment-value strong { font-weight:var(--font-regular,400); font-size: 1.15rem; overflow-wrap: anywhere; } .dfvn-payment-field.is-large strong { font-size: 1.7rem; letter-spacing: -.04em; } .dfvn-payment-copy { flex: 0 0 46px; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); } .dfvn-payment-copy .dfvn-icon { width: 22px; height: 22px; } .dfvn-payment-note { margin-top: var(--space-6); font-size: var(--type-meta-size); font-style: italic; } .dfvn-payment-qr { text-align: center; } .dfvn-payment-qr h2 { color: var(--muted); } .dfvn-payment-qr-frame { position: relative; display: grid; place-items: center; width: min(100%, 320px); aspect-ratio: 1; padding: 24px; margin: 0 auto 20px; border: 1px solid var(--line); border-radius: 24px; } .dfvn-payment-qr-scan { position:relative; width:100%; padding:16px; overflow:hidden; border-radius:14px; } .dfvn-payment-qr-frame img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; } .dfvn-payment-scan { position: absolute; right: -10px; bottom: -10px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--button-bg); color: var(--button-ink); } .dfvn-payment-scan .dfvn-icon { width: 26px; height: 26px; } .dfvn-payment-qr p { max-width: 280px; margin: 0 auto 28px; font-size: var(--type-small-size); } .dfvn-payment-status { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: 16px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--type-copy-size); } .dfvn-payment-spinner { width: 15px; height: 15px; border: 2px solid var(--line); border-top-color: var(--muted); border-radius: 50%; animation: dfvn-spin 1s linear infinite; } @media (max-width: 700px) { .dfvn-payment-grid { grid-template-columns: 1fr; gap: 30px; padding: 24px 20px; } .dfvn-received-card.is-pending .dfvn-received-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dfvn-payment-qr-frame { width: min(100%, 280px); padding: 16px; } } /* Homepage: a large new release, small discovery cards, a service banner and reading blocks. */ .home-main { --home-space:var(--card-section-gap); --home-heading-gap:var(--heading-card-gap); } .home-main[data-heading-size="large"] { --home-section-title-size:clamp(34px,4.4vw,64px); } .home-main > .section { margin-block:var(--home-space) 0; padding-block:var(--home-section-padding,0px); } .home-main :is(.section-heading,.home-daily-heading,.home-service-heading) { margin-bottom:var(--home-heading-gap); } .home-main .section-heading h2 { font-size:var(--section-title-size); } .home-main .intro p { font-size: clamp(1.6rem, 2.3vw, 2.8rem); } .home-main .intro .dot-mark { font-size: 3.2rem; } .home-collection--latest .product-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--card-gap); } .home-collection--latest .product-card:first-child { grid-row: span 2; display: flex; flex-direction: column; } .home-collection--latest .product-card:first-child .card-art { flex: 1; min-height: 430px; aspect-ratio: auto; } .home-collection--latest .product-card:not(:first-child) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: center; align-self: center; gap: var(--space-5); } .home-collection--latest .product-card[hidden] { display: none; } .home-collection--latest .product-card:not(:first-child) .catalog-save-actions { top: 10px; right: calc(44% + 24px); } .home-category-grid { display:flex; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:10px; flex-wrap:wrap; justify-content:center; } .home-category-glyph { font-size:clamp(3.4rem, 5.2vw, 6rem); line-height:1.1; letter-spacing:-.08em; margin-bottom:12px; display:none; } .home-category--serif .home-category-glyph { font-family: Georgia, serif; } .home-category--script .home-category-glyph { font-family: Georgia, serif; font-style: italic; } .home-category--display .home-category-glyph { font-weight:var(--font-extrabold,800); } .home-category-name { font-size: var(--type-body-size); font-weight:var(--font-semibold,600); overflow-wrap: anywhere; } .home-service-heading { max-width: 1100px; margin: 0 auto 48px; text-align: center; } .home-service-heading .eyebrow { margin-bottom: 18px; color: var(--muted); } .home-service-heading h2 { font-size:var(--section-title-size); line-height:var(--section-title-leading); } .home-service-heading:empty { display: none; } .home-service-frame { position: relative; isolation: isolate; overflow: hidden; border-radius:var(--card-radius); background: var(--ink); color: var(--bg); } .home-service-art { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-height: clamp(440px, 37vw, 720px); padding: clamp(40px, 4vw, 70px) 4%; color: var(--accent); font-size: clamp(80px, 11.5vw, 200px); line-height: 1.08; font-weight:var(--font-bold,700); letter-spacing: -.065em; } .home-service-art span:nth-child(2) { padding-right: 10%; } .home-service-art span:nth-child(3) { padding-right: 2%; } .home-service-copy { position: absolute; z-index: 1; left: clamp(24px, 4vw, 72px); bottom: clamp(24px, 4vw, 72px); width: min(470px, 38%); } .home-service-copy p { font-size: clamp(1.05rem, 1.45vw, 1.5rem); line-height: 1.45; color: inherit; margin-bottom: var(--space-6); } .home-service--photo .home-service-copy { width:min(620px, 70%); color:var(--hero-ink); bottom:32px; left:32px; } .home-service--photo .home-service-frame:after { content: ''; position: absolute; inset: 35% 0 0; z-index: 0; background: linear-gradient(transparent, var(--hero-shade)); pointer-events: none; } .home-font-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, calc((100% - 72px) / 4)); gap: var(--space-6); overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x mandatory; } .home-font-rail .product-card { min-width: 0; scroll-snap-align: start; } .home-main > .editorial { margin-block: var(--space-6); padding: clamp(56px, 6vw, 110px) 24px; border: 0; background: var(--surface); border-radius:var(--card-radius); } .home-main > .editorial h2 { font-size:var(--section-title-size); line-height:var(--section-title-leading); } .home-collection--free :is(.journal-grid, .product-grid) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .home-collection--free :is(.journal-card, .product-card):first-child :is(.journal-card__image, .card-art) { aspect-ratio: 1.12; } .home-collection--international :is(.journal-grid, .product-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); } .home-collection--international :is(.journal-card, .product-card) { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: var(--space-6); padding: 20px; background: var(--surface); border-radius:var(--card-radius); } .home-collection--international .journal-card__copy { padding: 0; } .home-journal .journal-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--card-gap); } .home-journal .journal-card:first-child { grid-row: span 2; } .home-journal .journal-card:first-child .journal-card__image { aspect-ratio: 1.45; } .home-journal .journal-card:first-child h3 { font-size:var(--card-title-size); line-height:var(--card-title-leading); } .home-journal .journal-card:not(:first-child) { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-6); align-items: center; } .home-journal .journal-card:not(:first-child) .journal-card__copy { padding: 0; } .home-journal .journal-card:not(:first-child) .journal-card__meta { font-size: var(--type-caption-size); gap: var(--space-2); } .home-journal .journal-card:not(:first-child) h3 { font-size:var(--card-title-size); line-height:var(--card-title-leading); } .home-journal .journal-card:not(:first-child) p { font-size: var(--type-copy-size); } @media (max-width: 1100px) { .home-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .home-collection--latest .product-grid { gap: var(--card-gap); } .home-collection--latest .product-card:not(:first-child) { grid-template-columns: minmax(0, 1fr); gap: 10px; } .home-collection--latest .product-card:first-child .card-art { min-height: 480px; } .home-collection--latest .product-card:not(:first-child) .catalog-save-actions { right: 10px; } .home-service-copy { width: 40%; } .home-font-rail { grid-auto-columns: minmax(280px, calc((100% - 24px) / 2)); } .home-collection--international :is(.journal-grid, .product-grid) { grid-template-columns: minmax(0, 1fr); } .home-journal .journal-card:not(:first-child) { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } } @media (max-width: 700px) { .home-collection--latest .product-grid, .home-collection--free :is(.journal-grid, .product-grid), .home-journal .journal-grid { grid-template-columns: minmax(0, 1fr); } .home-collection--latest .product-card:first-child { grid-row: auto; } .home-collection--latest .product-card:first-child .card-art { min-height: 0; aspect-ratio: 1810 / 1213; } .home-collection--latest .product-card:not(:first-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); } .home-collection--latest .product-card:not(:first-child) .catalog-save-actions { right: calc(50% + 14px); } .home-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; } .home-category { min-height: 176px; padding: 20px 12px; } .home-category-glyph { font-size: 3.7rem; } .home-service-heading { margin-bottom: 30px; } .home-service-frame { border-radius:var(--card-radius); } .home-service-art { min-height: 330px; font-size: clamp(70px, 19vw, 130px); padding-block: 34px; align-items: center; } .home-service-copy, .home-service--photo .home-service-copy { position: relative; left: auto; bottom: auto; width: auto; padding: 0 24px 30px; color: inherit; } .home-service--photo .home-service-copy { padding-top: 24px; background: var(--surface); color: var(--ink); } .home-service--photo .home-service-frame:after { display: none; } .home-service-copy p { font-size: var(--type-body-size); } .home-service-copy .button { width: 100%; } .home-font-rail { grid-auto-columns: 84%; } .home-collection--free :is(.journal-card, .product-card):first-child :is(.journal-card__image, .card-art) { aspect-ratio: 1.55; } .home-collection--international :is(.journal-card, .product-card) { gap: var(--space-4); padding: 16px; } .home-collection--international .journal-card h3 { font-size:var(--card-title-size); line-height:var(--card-title-leading); } .home-collection--international .journal-card__meta { font-size: var(--type-micro-size); margin-bottom: var(--space-2); } .home-journal .journal-card:first-child { grid-row: auto; } .home-journal .journal-card:not(:first-child) { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-4); } .home-journal .journal-card:not(:first-child) .journal-card__meta { display: none; } .home-journal .journal-card:not(:first-child) p { display: none; } } /* Selected homepage A: uniform specimens, compact categories and an even Blog grid. */ .home-main .home-collection--latest .product-grid, .home-main .home-collection--free :is(.journal-grid, .product-grid), .home-main .home-journal .journal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); } .home-main .home-collection--latest .product-card { display: block; grid-row: auto; align-self: start; background: none; padding: 0; } .home-main .home-collection--latest .product-card[hidden] { display: none; } .home-main .home-collection--latest .product-card .card-art { aspect-ratio: 1810 / 1213; min-height: 0; flex: none; } .home-main .home-collection--latest .product-card .catalog-save-actions { right: 10px; } .home-main .section-action { margin-top:var(--home-heading-gap); } .home-category { display:flex; flex-direction:row; justify-content:center; align-items:center; gap:14px; min-height:0; min-width:0; padding:13px 20px; background:var(--surface); border-radius:99px; text-align:center; } .home-category-count { color:var(--muted); font-size:var(--type-meta-size); } .home-main .home-collection--free :is(.journal-card, .product-card) :is(.journal-card__image, .card-art) { aspect-ratio: 1810 / 1213; } .home-main .home-journal .journal-card { grid-row: auto; display: block; } .home-main .home-journal .journal-card .journal-card__image { aspect-ratio: 1810 / 1213; } .home-main .home-journal .journal-card .journal-card__copy { padding: 20px 0 0; } .home-main .home-journal .journal-card h3 { font-size:var(--card-title-size); line-height:var(--card-title-leading); } .home-main .home-journal .journal-card .journal-card__meta { display: flex; font-size: var(--type-meta-size); gap: var(--space-3); } .home-main .home-journal .journal-card p { display: -webkit-box; font-size: var(--type-answer-size); } .home-service:not(.home-service--photo) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; } .home-service:not(.home-service--photo) .home-service-heading { text-align: left; margin: 0; } .home-service:not(.home-service--photo) .home-service-heading h2 { font-size:var(--section-title-size); } .home-service:not(.home-service--photo) .home-service-frame { overflow: visible; background: transparent; color: var(--ink); border-radius: 0; } .home-service:not(.home-service--photo) .home-service-art { display: none; } .home-service:not(.home-service--photo) .home-service-copy { position: static; width: auto; max-width: 580px; padding: 0; } .home-service:not(.home-service--photo) .home-service-copy p { font-size: clamp(1.1rem, 1.6vw, 1.7rem); } /* Daily spotlight: centered title, image right; mobile shows image before the copy. */ .home-daily-heading { max-width:1040px; margin:0 auto clamp(32px, 4vw, 64px); text-align:center; } .home-daily-heading .eyebrow { color: var(--muted); margin-bottom: var(--space-5); } .home-daily-heading h2 { font-size:var(--section-title-size); line-height:var(--section-title-leading); } .home-daily-copy { padding: 0; text-align: right; } .home-daily-copy .button { margin-top: var(--space-7); } .home-daily-art { display:block; overflow:hidden; border-radius:var(--card-radius); background:var(--surface); aspect-ratio:41 / 34; } .home-daily-image-picture, .home-daily-image { display:block; width:100%; height:100%; } .home-daily-placeholder { display: grid; place-items: center; aspect-ratio: 1; font-size: clamp(7rem, 20vw, 22rem); letter-spacing: -.08em; } .hero-image-picture { position: absolute; inset: 0; z-index: -2; } .hero-image-picture .hero-image { z-index: auto; } :is(.hero,.case-hero) .hero-dots { gap:0; right:var(--slider-dots-inset); bottom:var(--slider-dots-inset); padding:var(--slider-dots-pad); border-radius:var(--slider-dots-radius); background:var(--slider-dots-bg); backdrop-filter:blur(var(--slider-dots-blur)) saturate(var(--slider-dots-saturation)); border:1px solid var(--slider-dots-edge); -webkit-backdrop-filter:blur(var(--slider-dots-blur)) saturate(var(--slider-dots-saturation)); box-shadow:inset 0 1px 0 var(--slider-dots-shine); } .hero-dots button { display:grid; place-items:center; width:var(--slider-dot-target); height:var(--slider-dot-target); padding:0; border:0; background:transparent; } .hero-dots button span { display: block; width:var(--slider-dot-size); height:var(--slider-dot-size); background:var(--slider-dot-ink); border-radius: 50%; } .hero-dots button[aria-current="true"] span { background:var(--slider-dot-active-ink); } .hero[data-slider]:focus-visible { outline:2px solid var(--focus); outline-offset:4px; } .ticker-label { display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; max-width:24ch; } .ticker-label .eyebrow { margin:0; } .ticker-label .ticker-label-icon { width:20px; height:20px; flex:0 0 20px; } /* Footer navigation and wordmark; legal placement is refined below for each device. */ .footer-grid nav h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .footer-socials--mobile { display: none; } .footer-wordmark-desktop { aspect-ratio: 2794.6929 / 429.9087; } .footer-wordmark-mobile { display: none; } /* Keep native checkbox semantics, with a round outline and selected dot. */ body input[type="checkbox"], body input[type="radio"] { appearance: none; -webkit-appearance: none; display: inline-block; flex: 0 0 16px; width: 16px; height: 16px; min-width: 16px; min-height: 16px; padding: 0; margin: 0; vertical-align: middle; border: 1.5px solid var(--muted); border-radius: 50%; background: var(--bg); box-shadow: none; cursor: pointer; } body input[type="checkbox"]:checked, body input[type="radio"]:checked { background: radial-gradient(circle, var(--ink) 0 4px, transparent 4.5px); border-color: var(--ink); } body input[type="checkbox"]:disabled, body input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; } body input[type="checkbox"]:focus-visible, body input[type="radio"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } @media (forced-colors: active) { body input[type="checkbox"], body input[type="radio"] { appearance: auto; } } @media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.footer-intro { grid-column: 1 / -1; padding: 0; max-width: 440px; }.footer-note { grid-column: 1 / -1; max-width: 320px; } } @media (max-width: 767px) { .home-main .home-collection--latest .product-grid, .home-main .home-collection--free :is(.journal-grid, .product-grid), .home-main .home-journal .journal-grid { grid-template-columns: minmax(0, 1fr); gap: var(--card-gap); } .home-category { padding: 10px 14px; } .home-service:not(.home-service--photo) { grid-template-columns: 1fr; gap: var(--space-7); } .home-service:not(.home-service--photo) .home-service-heading { text-align: center; } .home-service:not(.home-service--photo) .home-service-copy { text-align: center; } .home-daily-art { order:-1; width:100%; border-radius:var(--card-radius); aspect-ratio:10 / 13; } .home-daily-copy { max-width: 340px; text-align: center; } .hero-slide, :is(.home-main,.shop-hero)[data-hero-size="screen"] .hero-slide { min-height: 0; aspect-ratio: var(--cover-mobile-ratio,9 / 16); } .shop-cover--04 { height:auto; min-height:0; aspect-ratio:var(--cover-mobile-ratio,9 / 16); } .shop-cover--04[data-mobile-ratio="4:5"] { --page-title-size:var(--section-title-size); --heading-card-gap:var(--title-lead-gap); } .hero-copy { bottom: 64px; left: 20px; right: 20px; width: auto; text-align: center; } .hero-copy :is(h1, h2) { font-size:var(--cover-title-size); margin-block:var(--title-lead-gap); line-height:var(--cover-title-leading); } .hero-copy p { margin-inline: auto; font-size: var(--type-copy-size); margin-bottom: var(--space-5); } :is(.hero,.case-hero) .hero-dots { --slider-dots-inset:12px; --slider-dots-pad:2px 4px; right:auto; bottom:var(--slider-dots-inset); left:50%; transform:translateX(-50%); padding:var(--slider-dots-pad); } .footer-back { display: none; } .footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; } .footer-intro { grid-column: 1 / -1; width: 100%; max-width: none; text-align: center; padding: 0 0 20px; } .footer-intro p { max-width: 340px; margin-inline: auto; font-size: var(--type-small-size); } .footer-contact { max-width: none; margin-top: var(--space-5); text-align: left; } .footer-grid nav[aria-label="Khám phá"] { grid-column: 1; grid-row: var(--footer-first-row,2); } .footer-grid nav[aria-label="Hỗ trợ"] { grid-column: 1; grid-row: var(--footer-second-row,3); } .footer-grid nav[aria-label="DAFONT"] { grid-column: 2; grid-row: var(--footer-first-row,2); } .footer-note { grid-column: 2; grid-row: var(--footer-second-row,3); max-width: none; } .footer-note p { font-size: var(--type-small-size); } .footer-art { display: none; } .footer-socials { justify-content: center; } .footer-socials--desktop { display: none; } .footer-socials--mobile { display: flex; margin-bottom: var(--space-7); } .footer-socials--mobile:empty { display: none; } .footer-wordmark-desktop { display: none; } .footer-wordmark-mobile { display: grid; gap: var(--space-3); } .footer-wordmark-mobile svg { height: auto; } .site-footer { --footer-legal-gap:clamp(4px, 1.8vw, 8px); --footer-legal-size:clamp(.53rem, 2.6vw, .65rem); --footer-top-space:var(--card-section-gap); --footer-bottom:24px; --footer-logo-space:40px; } .footer-policy-links { row-gap: 10px; } .footer-cookie-link { display: none; } } /* 0.11.25: auth copy, NOON image frames and compact footer newsletter. */ .account-form .auth-policy { margin: 28px 0 0; text-align: center; color: var(--muted); font-size: var(--type-meta-size); line-height: 1.65; } .auth-policy a { color: inherit; } .account-form .auth-input input:focus-visible { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .account-form .auth-input input[aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--error); } .home-daily-grid { display:grid; grid-template-columns:minmax(0, 498px) minmax(0, 820px); align-items:center; gap:49px; width:min(100%, 1367px); margin-inline:auto; } .home-daily-copy h3 { margin:0 0 var(--card-title-copy-gap); font-size:var(--card-title-size); line-height:var(--card-title-leading); letter-spacing: -.045em; } .home-daily-image { object-fit: cover; } .home-service--photo .home-service-frame { height: 460px; } .home-service-image-picture { display: block; width: 100%; height: 100%; } .home-service-image { display:block; width:100%; height:100%; object-fit:cover; object-position:center 20%; } .footer-back .dfvn-icon { width: 12px; height: 12px; } .footer-socials:empty { display: none; } .footer-socials a { display: inline-flex; } .footer-socials svg { width: var(--footer-social-icon-size); height: var(--footer-social-icon-size); } .footer-newsletter { width: min(100%, 310px); margin-top: 18px; } .footer-email-field { --field-radius:var(--pill); --field-padding:12px; --field-bg:color-mix(in srgb,var(--ink) 9%,var(--bg)); display: flex; align-items: center; overflow: hidden; } .footer-email-field input[type="email"] { width: 100%; min-width: 0; } .footer-email-field input::placeholder { color: var(--muted); opacity: .6; } .footer-email-field:has(input:focus-visible) { box-shadow:inset 0 0 0 1px var(--muted); } .footer-email-field input:focus { outline: none; box-shadow: none; } .footer-email-field button { display: grid; place-items: center; flex: 0 0 var(--field-height); width: var(--field-height); height: calc(var(--field-height) - 2px); padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 22px; } .footer-email-field button:disabled { opacity: .4; cursor: wait; } .footer-intro .footer-newsletter-status { margin: 8px 0 0; font-size: var(--type-caption-size); text-align: left; } .footer-newsletter-status:empty { display: none; } @media (max-width: 767px) { .home-daily-grid { display:flex; flex-direction:column; gap:var(--space-6); } .home-daily-copy h3 { font-size:var(--card-title-size); line-height:var(--card-title-leading); margin:0 0 var(--card-title-copy-gap); } .home-service--photo .home-service-frame { height: auto; aspect-ratio: 7 / 9; } .home-service--photo .home-service-image-picture { position: absolute; inset: 0; } .home-service--photo .home-service-copy { position: absolute; bottom: 24px; left: 24px; right: 24px; width: auto; padding: 0; background: transparent; color: var(--hero-ink); } .home-service--photo .home-service-copy p { font-size: var(--type-copy-size); } .home-service--photo .home-service-copy .button { width: auto; } .home-service--photo .home-service-frame:after { display: block; } .footer-newsletter { margin: 18px auto 0; } .footer-note .footer-socials { justify-content: flex-start; gap: 10px; } .footer-note .footer-socials svg { width: 18px; height: 18px; } } /* 0.11.26 — inline notices, card cart actions and optional cart panel. */ .footer-email-field .icon-small-right { width: 21px; height: 21px; } .footer-intro .footer-newsletter-status:not(:empty) { display: flex; align-items: start; gap: 7px; padding: 10px 12px; border-radius: 10px; background: var(--surface); line-height: 1.5; } .footer-newsletter-status:not(:empty)::before { content: '•'; flex: 0 0 auto; } .footer-newsletter-status[data-kind="error"] { color: #ac4035; background: #ac40350c; } .footer-newsletter-status[data-kind="error"]::before { content: '!'; font-weight:var(--font-bold,700); } .footer-newsletter-status[data-kind="success"] { color: #248060; background: #2480600c; } .footer-newsletter-status[data-kind="success"]::before { content: '✓'; } .home-daily-copy p { margin:0; font-size:var(--type-answer-size); line-height:1.6; } .journal-article .post-navigation a { display:grid; grid-template-rows:auto auto; align-content:center; gap:6px; width:100%; min-height:96px; padding:20px 22px; border-radius:18px; background:var(--surface); font-weight:var(--font-semibold,600); } .card-visual { position: relative; min-width: 0; } .card-cart { position: absolute; z-index: 3; left: 50%; bottom: 20px; width: min(310px, calc(100% - 32px)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; } .card-cart-button { display: none; } .has-card-cart .card-cart-button { display: grid; place-items: center; position: relative; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid #ffffff65; color: #161616; background: #ffffff9c; box-shadow: 0 4px 20px #00000015, inset 0 1px 0 #ffffff80; -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); opacity: 0; transition: opacity .2s, background .2s; pointer-events: auto; } .card-cart-button .dfvn-icon { width: 18px; height: 18px; } .card-cart-button.is-in-cart { background: #161616b3; color: #fff; } .card-cart-button.is-in-cart::after { content: '−'; display: grid; place-items: center; position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; color: #161616; font-size: var(--type-small-size); line-height: 1; } .card-cart-button:disabled { cursor: default; opacity: .5; } .card-visual:hover .card-cart-button, .card-visual:focus-within .card-cart-button, .card-cart.is-selecting .card-cart-button { opacity: 1; } .card-cart-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 240px; padding: 5px 10px; border-radius: 99px; background: #161616; color: #fff; font-size: .67rem; line-height: 1.3; opacity: 0; visibility: hidden; pointer-events: none; } .card-cart-button:hover .card-cart-tooltip, .card-cart-button:focus-visible .card-cart-tooltip { opacity: 1; visibility: visible; } .card-cart-options { position: absolute; width: 100%; bottom: 52px; border: 1px solid #ffffff65; border-radius: 18px; padding: 16px; background: color-mix(in srgb, var(--bg) 85%, transparent); color: var(--ink); box-shadow: 0 8px 40px #00000020; -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); pointer-events: auto; max-height: min(380px, 65vh); overflow-y: auto; } .card-option-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--type-small-size); } .card-option-header button { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: inherit; font-size: 22px; } .card-cart-options label { display: block; margin-bottom: 10px; font-size: var(--type-meta-size); } .card-cart-options select { display: block; width: 100%; margin-top: 5px; } .card-option-price { display: block; margin: 4px 0 12px; font-size: var(--type-meta-size); color: var(--muted); } .card-cart-options .button { width: 100%; } .card-cart-options .button:disabled { opacity: .4; cursor: default; } .card-cart.is-selecting .card-cart-tooltip { display: none; } .card-cart-status:empty { display: none; } .card-cart-status { position: absolute; bottom: 52px; left: 50%; width: max-content; max-width: 100%; transform: translateX(-50%); margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--bg); box-shadow: 0 4px 20px #00000010; font-size: var(--type-caption-size); line-height: 1.4; overflow-wrap: anywhere; pointer-events: auto; } .card-cart.is-selecting .card-cart-status { position: static; transform: none; margin-top: var(--space-2); } .card-cart[aria-busy="true"] .card-cart-button { opacity: .6; cursor: wait; } @media (hover: none) { .has-card-cart .card-cart-button { opacity: 1; } } .cart-panel-open { overflow: hidden; } .dfvn-cart-dialog { position: fixed; inset: 16px 16px auto auto; width: min(440px, calc(100vw - 32px)); max-width: none; max-height: min(760px, calc(100dvh - 32px)); height: min(760px, max(600px, 78dvh), calc(100dvh - 32px)); margin: 0; padding: 0; border: 0; border-radius: 29px 29px 24px 24px; background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--ink); box-shadow: 0 12px 60px #00000014; overflow: hidden; } .dfvn-cart-dialog[open] { display: flex; flex-direction: column; animation: cart-panel-enter .25s ease-out; } .dfvn-cart-dialog.is-empty { height: auto; } .dfvn-cart-dialog::backdrop { background: #16161640; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .cart-panel-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; min-height: 58px; padding: 14px 20px; border-radius: 99px; background: var(--bg); gap: var(--space-3); } .cart-panel-header button { display: flex; align-items: center; gap: var(--space-3); border: 0; background: transparent; color: inherit; padding: 0; font-size: var(--type-small-size); } .cart-panel-header h2 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-copy-size); font-weight:var(--font-medium,500); margin: 0; letter-spacing: 0; } .cart-panel-header [data-panel-count] { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: var(--surface); font-size: var(--type-caption-size); } .cart-panel-content { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; overscroll-behavior:contain; } .cart-panel-loading { padding: 28px; color: var(--muted); font-size: var(--type-small-size); } .cart-panel-empty { padding: 36px 24px 28px; } .cart-panel-empty h3 { font-size:var(--compact-title-size); line-height:var(--compact-title-leading); } .cart-panel-empty > p { color: var(--paragraph-ink); font-size: var(--type-small-size); margin-bottom: 22px; } .cart-panel-empty .cart-panel-login { margin: 20px 0 0; font-size: var(--type-caption-size); } .cart-panel-login a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .cart-panel-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px; overscroll-behavior: contain; } .cart-panel-item { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: var(--space-3); padding: 22px 0; border-bottom: 1px solid var(--line); } .cart-panel-image { align-self: start; border-radius: 12px; overflow: hidden; background: var(--bg); } .cart-panel-image img { width: 100%; height: 90px; object-fit: cover; } .cart-panel-name { display: block; font-weight:var(--font-semibold,600); font-size: var(--type-small-size); line-height: 1.35; overflow-wrap: anywhere; } .cart-panel-item .variation { color: var(--muted); margin: 5px 0; font-size: var(--type-caption-size); line-height: 1.5; } .cart-panel-item .variation dt, .cart-panel-item .variation dd { display: inline; margin: 0; } .cart-panel-item .variation dd p { display: inline; margin: 0; } .cart-panel-quantity { display: block; color: var(--muted); font-size: var(--type-micro-size); margin: 6px 0 14px; } .cart-panel-remove { --cart-remove-size: 13px; --cart-remove-padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--bg); color: var(--ink); padding: var(--cart-remove-padding); font-size: var(--cart-remove-size); line-height: 1.4; cursor: pointer; } .cart-panel-price { color: var(--muted); font-size: var(--type-caption-size); white-space: nowrap; line-height: 1.5; } .cart-panel-bottom { flex: 0 0 auto; margin-top: var(--space-4); border-radius: 18px 18px 0 0; background: var(--bg); padding: 0 20px 16px; } .cart-panel-coupon { margin: 0 -20px 16px; padding: 16px 20px; background: color-mix(in srgb, var(--surface) 40%, var(--bg)); border-radius: 18px 18px 0 0; font-size: var(--type-meta-size); } .cart-panel-coupon summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; } .cart-panel-coupon summary::-webkit-details-marker { display: none; } .cart-panel-coupon summary .dfvn-icon { width: 14px; height: 14px; } .cart-panel-coupon[open] summary .dfvn-icon { transform: rotate(180deg); } .cart-panel-coupon form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); margin-top: var(--space-3); } .cart-panel-coupon input { min-width: 0; width: 100%; } .cart-panel-coupon button { white-space: nowrap; } .cart-panel-discount { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; font-size: var(--type-caption-size); } .cart-panel-discount button { border: 0; color: var(--muted); background: transparent; text-decoration: underline; } .cart-panel-total { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 16px 0 14px; font-size: var(--type-answer-size); } .cart-panel-checkout { width: 100%; gap: var(--space-3); font-size: var(--type-copy-size); border-radius: 12px; } .cart-panel-continue { --cart-continue-size: 14px; --cart-continue-space: 12px; display: flex; align-items:center; justify-content:center; width: 100%; min-height: 44px; margin-top: var(--cart-continue-space); background: transparent; color: var(--muted); border: 0; padding: 0; font-size: var(--cart-continue-size); cursor: pointer; } .cart-panel-continue:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; } .cart-panel-status:empty { display: none; } .cart-panel-status { flex: 0 0 auto; margin: 0; padding: 10px 20px; background: var(--bg); font-size: var(--type-caption-size); line-height: 1.5; } .cart-panel-status[data-kind="error"], .card-cart-status[data-kind="error"] { color: #ac4035; } .cart-panel-content[aria-busy="true"] { opacity: .6; } @keyframes cart-panel-enter { from { opacity: 0; translate: 12px 0; } to { opacity: 1; translate: 0; } } @media (max-width: 767px) { .hero-dots button span { --slider-dot-size:3px; width:var(--slider-dot-size); height:var(--slider-dot-size); } .price del, .price ins { white-space: nowrap; } .home-daily-copy p { font-size: var(--type-copy-size); } .card-cart { bottom: 16px; } .has-card-cart .card-cart-button { width: 34px; height: 34px; } .card-cart-button .dfvn-icon { width: 17px; height: 17px; } .dfvn-cart-dialog { inset: 12px 12px auto auto; width: calc(100vw - 24px); height: min(760px, max(600px, 78dvh), calc(100dvh - 24px)); max-height: calc(100dvh - 24px); border-radius: 29px 29px 20px 20px; } .dfvn-cart-dialog.is-empty { height: auto; } .cart-panel-item { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; } .cart-panel-items, .cart-panel-header { padding-inline: 16px; } .cart-panel-price { font-size: var(--type-micro-size); } .cart-panel-name { font-size: var(--type-meta-size); } .cart-panel-image img { height: 76px; } } @media (prefers-reduced-motion: reduce) { .dfvn-cart-dialog[open] { animation: none; } .card-cart-button { transition: none; } } .dfvn-cart-dialog.is-empty .cart-panel-content { overflow-y: auto; } @media (max-width: 767px) { } /* 0.11.27 — inline SVG, compact cart and saved journal cards. */ .dfvn-icon svg, .theme-icon svg, .brand-wordmark svg, .brand-symbol svg, .account-specimen-art svg, .ticker-marker--sun svg { display: block; width: 100%; height: 100%; } .dfvn-cart-toast__close .dfvn-icon, .saved-notice__close .dfvn-icon, .card-option-header button .dfvn-icon, .cart-panel-header button .dfvn-icon { width: var(--close-icon-size); height: var(--close-icon-size); } .icon-bookmark > span, .icon-dashboard > span, .icon-eye > span { display: block; width: 100%; height: 100%; } .icon-bookmark .bookmark-filled, .is-saved .icon-bookmark .bookmark-outline { display: none; } .is-saved .icon-bookmark .bookmark-filled { display: block; } .icon-dashboard .collection-filled, .is-saved .icon-dashboard .collection-outline { display: none; } .is-saved .icon-dashboard .collection-filled { display: block; } .icon-eye .eye-closed, [data-password-toggle][aria-pressed="true"] .icon-eye .eye-open, .show-password-input.display-password .icon-eye .eye-open { display: none; } [data-password-toggle][aria-pressed="true"] .icon-eye .eye-closed, .show-password-input.display-password .icon-eye .eye-closed { display: block; } .dfvn-select-chevron > .dfvn-icon { width: 100%; height: 100%; } .cart-panel-coupon-status { grid-column: 1 / -1; margin: 0; font-size: var(--type-meta-size); line-height: 1.5; } .cart-panel-coupon-status:empty { display: none; } .cart-panel-coupon-status:not(:empty) { padding: 8px 10px; border-radius: 8px; background: var(--surface); } .cart-panel-coupon-status[data-kind="error"] { color: var(--error); background: color-mix(in srgb, var(--error) 7%, var(--bg)); } .cart-panel-coupon input[aria-invalid="true"] { border-color: var(--error); } .cart-panel-coupon-status[data-kind="success"] { color: var(--ink); } .cart-panel-item:last-child { border-bottom: 0; } .journal-card__visual { position: relative; min-width: 0; } .journal-card__visual .journal-card__image { height: 100%; } .journal-card__visual .journal-save-button { position: absolute; top: 12px; right: 12px; z-index: 2; } /* Card bookmarks use the shop treatment in every saved state and theme. */ :is(.catalog-save-actions, .saved-font-tools, .journal-card__visual) .product-save-button { width: 38px; height: 38px; min-height: 38px; padding: 8px; border: 1px solid var(--glass-edge); border-radius: var(--pill); background: var(--glass-bg); color: var(--ink); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .journal-card--featured > .journal-card__visual { min-height: 100%; } .saved-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .account-form .auth-intro .text-link, .account-form .auth-switch .text-link { font-size: inherit; line-height: inherit; } .home-service-copy p, .home-service:not(.home-service--photo) .home-service-copy p { font-size: var(--type-answer-size); line-height: 1.6; } @media (max-width: 767px) { .home-service-copy p, .home-service--photo .home-service-copy p { font-size: var(--type-copy-size); } .saved-post-grid { grid-template-columns: 1fr; } } .related-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); margin-bottom: var(--space-6); } .related.products .related-heading h2 { margin: 0; } .related-heading .text-link { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; font-weight:var(--font-medium,500); } @media (max-width: 767px) { .related-heading { align-items: center; gap: var(--space-3); } .related-heading h2 { font-size:var(--section-title-size); line-height:var(--section-title-leading); } .related-heading .text-link { font-size: var(--type-meta-size); } } @media (max-height: 520px) { .cart-panel-content { overflow-y: auto; } .cart-panel-items { flex-shrink: 0; } } /* Verified email registration. */ .registration-verification { --verification-code-size: clamp(1.5rem, 4vw, 2rem); --verification-code-spacing: .4em; --verification-icon: 56px; --verification-space: 22px; --verification-small: .8rem; --verification-action-gap: 12px; --verification-action-border: 1px solid var(--line); --verification-cell-gap: clamp(6px, 1.5vw, 12px); --verification-cell-max: 510px; --verification-cell-min: 44px; --verification-cell-radius: clamp(14px, 2vw, 22px); --verification-cell-bg: var(--surface); --verification-cell-weight: 600; --verification-cell-space: 12px auto 4px; --verification-focus-width: 2px; --verification-focus-offset: 2px; --verification-disabled-opacity: .4; --verification-busy-opacity: .65; --verification-spinner-size: 22px; --verification-spinner-width: 2px; --verification-spinner-speed: .75s; } .registration-verification input[name="code"] { font-size: var(--verification-code-size); letter-spacing: var(--verification-code-spacing); text-align: center; } .registration-verification .auth-intro { color: var(--paragraph-ink); font-size: var(--type-body-size); line-height: 1.65; overflow-wrap: anywhere; } .registration-code-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--verification-cell-gap); width: 100%; max-width: var(--verification-cell-max); margin: var(--verification-cell-space); } .account-form.registration-verification .auth-field .registration-code-cells input { min-width: 0; width: 100%; min-height: var(--verification-cell-min); aspect-ratio: 1; padding: 0; border: 1px solid transparent; border-radius: var(--verification-cell-radius); background: var(--verification-cell-bg); color: var(--ink); font-size: var(--verification-code-size); font-weight: var(--verification-cell-weight); text-align: center; caret-color: var(--ink); } .registration-verification .registration-code-cells input:focus-visible { outline: var(--verification-focus-width) solid var(--ink); outline-offset: var(--verification-focus-offset); } .registration-verification [data-code-confirm] { display: flex; justify-content: center; align-items: center; gap: var(--verification-action-gap); } .registration-verification [data-code-confirm]:disabled { opacity: var(--verification-disabled-opacity); cursor: default; } .registration-verification .is-code-submitting [data-code-confirm] { opacity: var(--verification-busy-opacity); cursor: wait; } .registration-code-spinner { flex: 0 0 var(--verification-spinner-size); width: var(--verification-spinner-size); height: var(--verification-spinner-size); border: var(--verification-spinner-width) solid currentColor; border-right-color: transparent; border-radius: 50%; animation: registration-code-spin var(--verification-spinner-speed) linear infinite; } .registration-code-spinner[hidden] { display: none; } @keyframes registration-code-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .registration-code-spinner { animation: none; } } .registration-success-actions { display: grid; gap: var(--verification-action-gap); } .registration-success-actions .button { --verification-action-icon-gap: 8px; width: 100%; } .registration-success-icon { display: block; margin-bottom: var(--verification-space); } .registration-success-icon .dfvn-icon { width: var(--verification-icon); height: var(--verification-icon); } .registration-resend { margin: var(--verification-space) 0 0; text-align: center; color: var(--muted); font-size: var(--verification-small); } .registration-resend button { padding: 0; border: 0; background: transparent; color: var(--ink); font-weight: var(--font-heading); } .registration-resend button:disabled { color: var(--muted); cursor: default; } .registration-verification [data-registration-step][hidden] { display: none !important; } .registration-verification .registration-inline-link { color: var(--ink); font-weight:var(--font-medium,500); text-decoration: underline !important; text-underline-offset: 3px; } .registration-verification .registration-inline-link:hover { opacity: .7; } .registration-email-step .button { width: 100%; display: flex; align-items: center; justify-content: center; } .registration-email-step [aria-busy=true] .button { opacity: var(--verification-busy-opacity); cursor: wait; } .registration-email-step [aria-busy=true] input { cursor: wait; } .registration-back-link { display: flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--muted); font-size: var(--verification-small); font-weight:var(--font-medium,500); } .registration-back-link:hover { color: var(--ink); } .registration-back-link .dfvn-icon { width: 20px; height: 20px; } .product-license-note a { text-underline-offset:3px; text-decoration:underline; display:inline; white-space:nowrap; } /* Personal-use copy and its consultation link share the same text flow. */ .product-license-note p { display: inline; margin: 0; } .product-license-note p + p::before { content: " "; } /* Soft scanner light: decorative, never intercepts the QR or its download. */ .dfvn-payment-light { position:absolute; left:10px; right:10px; height:4px; top:-10px; border-radius:var(--pill); background:linear-gradient(90deg,transparent,rgba(196,181,253,.95),transparent); box-shadow:none; opacity:.9; pointer-events:none; } @media(prefers-reduced-motion:no-preference) { .dfvn-payment-light { animation:dfvn-qr-light 2.8s ease-in-out infinite; } } @keyframes dfvn-qr-light { 0%,100% { top:-10px; } 50% { top:calc(100% - 6px); } } .dfvn-payment-note em { font-style:italic; font-synthesis:style; } .dfvn-payment-qr p strong { font-weight:var(--font-semibold,600); } @media(prefers-reduced-motion:reduce) { .dfvn-payment-light { display:none; } } /* Keyboard focus without an outer border. */ input:focus-visible,textarea:focus-visible,select:focus-visible { outline:none!important; box-shadow:none!important; } a:focus-visible { text-decoration:underline; text-underline-offset:4px; } button:focus-visible,summary:focus-visible,.button:focus-visible { filter:brightness(.85); } input[type=search]::-webkit-search-cancel-button { -webkit-appearance:none; appearance:none; } .dfvn-search-control { position:relative; display:block; width:100%; min-width:0; } .dfvn-search-host { position:relative; min-width:0; } .dfvn-search-control>input,.dfvn-search-host>input { padding-right:48px; } .dfvn-search-clear { display:grid; place-items:center; flex:0 0 30px; width:30px; height:30px; padding:6px; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; } .dfvn-search-control>.dfvn-search-clear,.dfvn-search-host>.dfvn-search-clear { position:absolute; right:12px; top:50%; transform:translateY(-50%); } .dfvn-search-clear:hover,.dfvn-search-clear:focus-visible { color:var(--ink); background:color-mix(in srgb,var(--ink) 7%,transparent); } .dfvn-search-clear[hidden] { display:none; } .dfvn-search-clear svg { width:18px; height:18px; } /* Technical information: aligned values and an accessible license disclosure. */ .product-specs>summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); cursor:pointer; list-style:none; } .product-specs>summary::-webkit-details-marker,.product-license-tip>summary::-webkit-details-marker { display:none; } .product-specs>summary h2 { margin:0; font-size:var(--type-small-size); letter-spacing:.08em; text-transform:uppercase; } .product-specs>summary>.dfvn-icon { width:18px; height:18px; flex:none; } .product-specs[open]>summary { margin-bottom:var(--space-4); } .product-specs[open]>summary>.dfvn-icon { transform:rotate(180deg); } .product-specs dl>div { grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); padding:12px 0; } .product-spec-row--license { position:relative; } .product-license-tip>summary { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); list-style:none; cursor:pointer; border-radius:4px; } .product-license-tip>summary>.dfvn-icon { width:18px; height:18px; flex:none; color:var(--muted); transition:color .18s ease,transform .22s ease; } .product-license-tip>summary:is(:hover,:focus-visible)>.dfvn-icon { color:var(--ink); transform:translateY(-1px); } .product-license-tip-copy { position:absolute; z-index:30; right:0; bottom:calc(100% + 8px); width:360px; max-width:calc(100vw - 64px); padding:15px 17px; background:var(--button-bg); color:var(--button-ink); border-radius:14px; box-shadow:0 12px 32px #0003; font-size:var(--type-small-size); line-height:1.55; text-align:left; } .product-license-tip:not([open])>.product-license-tip-copy { display:none; } .product-license-tip-copy::after { content:""; position:absolute; left:0; right:0; height:12px; top:100%; } .product-license-tip-copy .product-license-contact { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; color:inherit; text-decoration:underline; text-underline-offset:3px; padding:3px 0; transition:opacity .18s ease,transform .18s ease; } .product-license-contact-arrow { display:inline-flex; align-items:center; line-height:1; } .product-license-contact-arrow>.dfvn-icon { width:12px; height:12px; flex:none; } .product-license-tip-copy .product-license-contact:hover { opacity:.72; transform:translateX(2px); } .product-owned-purchase { color:var(--ink); line-height:1.65; } .product-owned-purchase a { color:inherit; text-decoration:underline; text-underline-offset:3px; } .dfvn-product .dfvn-buy-now[data-buy-now-tone="purple"] { --action-bg:var(--lavender,#ddd6fc); --action-ink:#29253e; --action-line:transparent; background:var(--action-bg); color:var(--action-ink); border-color:transparent; } @media(prefers-reduced-motion:reduce) { .product-license-tip>summary>.dfvn-icon,.product-license-tip-copy .product-license-contact { transition:none; } } .product-license-tip>summary:focus-visible,.product-specs>summary:focus-visible { outline:2px solid var(--ink); outline-offset:4px; } .product-owned-note>a { color:#29253e; } .product-owned-note>a,.saved-font-owned-badge { border:1px solid #ffffff9c; box-shadow:inset 0 1px 0 #ffffffe0,0 4px 16px #29253e14; backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); background-image:linear-gradient(135deg,#ffffff24,transparent 70%); } .product-owned-copy>span { color:color-mix(in srgb,#29253e 75%,transparent); } .product-owned-note>a:hover { background:color-mix(in srgb,var(--lavender,#ddd6fc) 85%,#fff); } /* Shared catalogue/library ownership badge and compact collection controls. */ .saved-font-owned-badge { position:absolute; z-index:3; top:14px; left:16px; max-width:calc(100% - 72px); display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:var(--pill); background-color:color-mix(in srgb,var(--lavender,#ddd6fc) 84%,transparent); color:#29253e; font-size:var(--type-caption-size); font-weight:var(--font-medium,500); line-height:1.3; pointer-events:none; } .saved-font-owned-badge>.dfvn-icon { width:14px; height:14px; flex:none; } .saved-font-owned-badge>span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .card-visual:has(>.saved-font-owned-badge) .catalog-badge { top:54px; left:16px; } .header-search-owned { position:static; max-width:100%; justify-self:start; padding:4px 8px; } .home-daily:not(.home-daily--a) .home-daily-art { position:relative; } .saved-font-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); min-width:0; } .saved-font-title-row h3 { flex:1; min-width:0; margin:0; overflow-wrap:anywhere; align-self:center; } .saved-font-tools .saved-collection-remove--icon,.saved-font-unavailable>.saved-collection-remove--icon { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; min-height:38px; padding:8px; border:1px solid var(--glass-edge); border-radius:50%; background:var(--glass-bg); color:var(--ink); cursor:pointer; backdrop-filter:blur(16px); transition:background var(--speed),color var(--speed); } .saved-collection-remove--icon:hover { background:color-mix(in srgb,var(--ink) 12%,transparent); } .saved-font-tools .saved-collection-remove--icon:is(:hover,:focus-visible) { background:var(--bg); color:var(--danger,#b93434); } .saved-font-media:has(.saved-collection-remove--icon)>.saved-font-owned-badge { max-width:calc(100% - 110px); } .saved-collection-remove--icon:focus-visible { outline:2px solid var(--ink); outline-offset:3px; } .saved-collection-remove--icon>.dfvn-icon { width:18px; height:18px; } .dfvn-product .summary > .product-owned-note { margin:16px 0 0; } .saved-collection-remove--icon[data-tooltip]::after { z-index:5; line-height:1.4; white-space:nowrap; text-align:center; } .saved-font-unavailable>.saved-collection-remove--icon[data-tooltip]::after { left:0; right:auto; } .dfvn-product .product-owned-download { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:var(--space-5); } /* Incremental homepage additions; classic daily selectors keep their existing rules. */ .home-daily--a .home-daily-card { padding:clamp(24px,3.5vw,48px); border-radius:var(--card-radius); background:var(--surface); } .home-daily--a .home-daily-grid { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); align-items:center; gap:clamp(28px,4vw,64px); width:100%; } .home-daily--a .home-daily-copy { text-align:left; max-width:none; } .home-daily--a .home-daily-copy p { max-width:40ch; font-size:clamp(14px,1.2vw,18px); color:var(--muted); } .home-daily--a .home-daily-copy .button { --action-bg:var(--button-bg); --action-ink:var(--button-ink); --action-line:var(--button-bg); margin-top:var(--space-7); gap:22px; } .home-daily--a .home-daily-art { aspect-ratio:1810/1213; border-radius:var(--card-radius); } .home-member { --home-section-padding:clamp(30px,5vw,76px); --home-member-ink:#f7f7f2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); align-items:center; gap:clamp(30px,6vw,100px); padding:var(--home-section-padding); position:relative; isolation:isolate; overflow:hidden; border-radius:var(--card-radius); background:var(--studio-gradient-base,#17172f); color:var(--home-member-ink); } .home-member-ambient { position:absolute; z-index:-2; inset:0; overflow:hidden; pointer-events:none; } .home-member-ambient::before { content:''; position:absolute; inset:-28%; background:radial-gradient(ellipse at 18% 16%,var(--studio-gradient-base) 0,transparent 42%),radial-gradient(ellipse at 75% 32%,var(--studio-gradient-main) 0,transparent 38%),radial-gradient(ellipse at 46% 92%,var(--studio-gradient-secondary) 0,transparent 44%); animation:home-member-colors var(--studio-gradient-duration,24s) ease-in-out infinite; } .home-member-ambient::after { content:''; position:absolute; inset:-30%; background:radial-gradient(ellipse at 80% 88%,var(--studio-gradient-warm) 0,transparent 35%),radial-gradient(ellipse at 28% 63%,var(--studio-gradient-main) 0,transparent 44%); opacity:.65; animation:home-member-glow var(--studio-gradient-duration,24s) ease-in-out infinite; } .home-member::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(100deg,#13132d45,#13132d99); pointer-events:none; } .home-member-symbol { font:var(--font-medium,500) clamp(140px,19vw,300px)/.9 var(--dfvn-title-font,var(--body-font)); letter-spacing:-.055em; color:var(--lavender,#ddd6fc); text-align:center; } .home-member-symbol>span { display:block; margin-top:var(--space-7); font:var(--font-regular,400) var(--type-caption-size)/1.5 var(--body-font); letter-spacing:.14em; } .home-member-copy .eyebrow { display:block; color:color-mix(in srgb,var(--home-member-ink) 78%,transparent); margin-bottom:var(--space-6); } .home-member-copy h2 { font-size:var(--section-title-size); line-height:var(--section-title-leading); margin:0 0 var(--title-lead-gap); } .home-member-copy p { color:color-mix(in srgb,var(--home-member-ink) 85%,transparent); font-size:clamp(14px,1.2vw,18px); line-height:1.65; margin:0; } .home-member-copy .button { --action-bg:#f7f7f2; --action-ink:#262538; --action-line:#f7f7f2; margin-top:var(--space-7); gap:var(--space-5); } .home-member[data-motion="off"] .home-member-ambient::before,.home-member[data-motion="off"] .home-member-ambient::after { animation:none; } body[data-gradients="off"] .home-member { --home-member-ink:var(--gradient-flat-ink); background:var(--gradient-flat-bg); } body[data-gradients="off"] .home-member-ambient,body[data-gradients="off"] .home-member::after { display:none; } body[data-gradients="off"] .home-member-symbol { color:inherit; } @keyframes home-member-colors { 0%,100% { transform:translate(-2%,-2%) scale(1); filter:hue-rotate(0deg); } 35% { transform:translate(6%,4%) scale(1.08); filter:hue-rotate(-65deg); } 70% { transform:translate(-4%,5%) scale(1.05); filter:hue-rotate(65deg); } } @keyframes home-member-glow { 0%,100% { transform:translate(5%,3%) scale(1); filter:hue-rotate(0deg); opacity:.65; } 35% { transform:translate(-6%,-4%) scale(1.1); filter:hue-rotate(-65deg); opacity:.9; } 70% { transform:translate(1%,5%) scale(1.05); filter:hue-rotate(65deg); opacity:.75; } } @media(max-width:767px) { .ticker-label { max-width:130px; gap:7px; } .home-daily--a { --home-section-padding:24px; padding:24px; border-radius:var(--card-radius); background:var(--surface); } .home-daily--a .home-daily-card { padding:0; border-radius:0; background:transparent; } .home-daily--a .home-daily-grid { grid-template-columns:1fr; gap:var(--space-7); } .home-daily--a .home-daily-media { order:-1; } .home-daily--a .home-daily-copy { text-align:center; } .home-daily--a .home-daily-copy p { font-size:var(--type-copy-size); margin-inline:auto; } .home-member { --home-section-padding:30px; grid-template-columns:1fr; gap:30px; padding:30px 24px; border-radius:var(--card-radius); } .home-member-symbol { font-size:140px; text-align:left; } .home-member-symbol>span { margin-top:var(--space-5); } .home-member-copy .eyebrow { margin-bottom:18px; } .home-member-copy h2 { font-size:var(--section-title-size); margin:0 0 var(--title-lead-gap); } .home-member-copy p { font-size:var(--type-copy-size); } } @media(prefers-reduced-motion:reduce) { .home-member-ambient::before,.home-member-ambient::after { animation:none; } } /* Font construction artwork for the homepage service banner. */ .home-service--type .home-service-frame { height:clamp(270px,34vw,620px); aspect-ratio:auto; background:#171c2b; color:#f7f7f2; } .home-service--type .home-service-image-picture { position:absolute; inset:0; } .home-service--type .home-service-image { object-position:center; } .home-service--type .home-service-frame:after { inset:0; background:linear-gradient(90deg,#15162abb,transparent 80%); } .home-service--type .home-service-copy { width:min(480px,38%); max-width:480px; color:#f7f7f2; } .home-service--type .home-service-copy p { font-size:clamp(14px,1vw,16px); line-height:1.6; } .home-service--type .home-service-copy .button { --action-bg:#f7f7f2; --action-ink:#17172f; --action-line:#f7f7f2; } @media(max-width:767px) { .home-service--type .home-service-frame { height:clamp(560px,160vw,680px); } .home-service--type .home-service-frame:after { background:linear-gradient(0deg,#15162add,transparent 82%); } .home-service--type .home-service-copy { left:24px; right:24px; bottom:28px; width:auto; padding:0; } .home-service--type .home-service-copy p { font-size:var(--type-copy-size); } .home-service--type .home-service-copy .button { font-size:var(--type-small-size); } } /* Private VIP gallery slides contain no hidden image or source URL. */ .product-gallery-locked { aspect-ratio:var(--gallery-ratio,1.5); display:grid; place-items:center; padding:clamp(24px,4vw,64px); border-radius:var(--card-radius); background:radial-gradient(ellipse at 80% 10%,#ddd5fb66,transparent 60%),linear-gradient(135deg,#232034,#151720); color:#f7f7f2; text-align:center; } .product-gallery-lock-copy { display:flex; flex-direction:column; align-items:center; gap:var(--space-4); max-width:480px; } .product-gallery-lock-icon { display:grid; place-items:center; width:64px; height:64px; border:1px solid #ffffff40; border-radius:50%; background:#ddd5fb22; color:#ddd5fb; backdrop-filter:blur(12px); } .product-gallery-lock-icon .dfvn-icon { width:28px; height:28px; } .product-gallery-lock-kicker { font-size:var(--type-caption-size); font-weight:var(--font-semibold,600); letter-spacing:.12em; color:#ddd5fb; } .product-gallery-lock-copy h2 { margin:0; font-size:var(--dialog-title-size); line-height:var(--dialog-title-leading); color:inherit; } .product-gallery-lock-copy p { margin:0; font-size:var(--type-copy-size); line-height:1.6; color:#f7f7f2b3; } @media (max-width:800px) { .product-gallery-locked { aspect-ratio:auto; min-height:340px; } .product-gallery-lock-copy { gap:13px; } .product-gallery-lock-icon { width:52px; height:52px; } } .product-gallery-plan-link { color:#ddd5fb; font-size:var(--type-small-size); text-decoration:underline; text-underline-offset:4px; } /* Video occupies the existing bounded service banner rather than its intrinsic 4K height. */ .home-service--video .home-service-frame { height:460px; aspect-ratio:auto; background:#111027; } .home-service-video { position:absolute; inset:0; object-position:center; pointer-events:none; } @media(max-width:767px) { .home-service--video .home-service-frame { height:auto; display:flex; flex-direction:column; aspect-ratio:auto; background:#09061b; } } .home-service-heading .home-service-description { max-width:760px; margin:var(--title-lead-gap) auto 0; color:var(--lead-ink); font-size:var(--lead-size); line-height:var(--lead-leading); } @media(max-width:767px) { .home-service-heading .home-service-description { font-size:var(--lead-size); margin-top:var(--title-lead-gap); } } /* Phone typography keeps the complete video composition; its CTA has its own row. */ .home-service--video .home-service-frame:after { display:none; } @media(max-width:767px) { .home-service--video .home-service-video { position:relative; inset:auto; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; } .home-service--video .home-service-copy { position:static; inset:auto; width:100%; max-width:none; padding:18px 20px; display:flex; justify-content:center; background:#111027; } } /* A small purple dot identifies the custom Vietnamese-font service in footer links. */ .site-footer a:has(.footer-service-dot) { display:inline-flex; align-items:center; gap:var(--space-2); } .site-footer .footer-service-dot { width:8px; height:8px; flex:0 0 8px; color:#9b82df; vertical-align:middle; } .site-footer .footer-service-dot circle { fill:currentColor; stroke:none; } /* Weekly showcase: the same card, copy and section-heading tokens as the catalog. */ .home-brand-mark{display:block;width:96px;height:96px;margin:0 auto 28px} .home-brand-mark svg{display:block;width:100%;height:100%} .home-weekly-intro.section-heading{display:block;text-align:center;margin-bottom:var(--home-heading-gap)} .home-weekly-intro h2{margin:0} .home-weekly-intro p,.home-newsletter-copy>p{font-size:var(--lead-size);line-height:var(--lead-leading)} .home-weekly-intro p{margin:16px auto 0;max-width:680px} .home-weekly-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.45fr) minmax(0,1fr);column-gap:var(--space-8);row-gap:var(--space-16);align-items:center} .home-weekly-gallery,.home-weekly-copy{display:contents} .home-weekly-frame{ --card-tool-inset:calc(var(--media-radius)*.5); display:block; min-width:0; aspect-ratio:1713/1080; border-radius:var(--media-radius); grid-column:2; } .home-weekly-art{display:block;width:100%;height:100%;overflow:hidden;border-radius:inherit} .home-weekly-frame:nth-child(1),.home-weekly-copy article:nth-child(1){grid-row:1} .home-weekly-frame:nth-child(2),.home-weekly-copy article:nth-child(2){grid-row:2} .home-weekly-frame:nth-child(3),.home-weekly-copy article:nth-child(3){grid-row:3} .home-weekly-art:hover{opacity:1} .home-weekly-copy article{grid-column:1;min-width:0} .home-weekly-copy article:nth-child(even){grid-column:3} .home-weekly-image-picture,.home-weekly-image{display:block;width:100%;height:100%} .home-weekly-image{object-fit:cover} .home-weekly-copy h3{margin:0 0 var(--card-title-copy-gap);font-family:var(--dfvn-title-font);font-size:var(--product-section-size);font-weight:var(--font-heading);line-height:var(--card-title-leading);letter-spacing:var(--dfvn-title-letter-spacing);overflow-wrap:anywhere} .home-weekly-copy p{margin:0;font-size:var(--field-size);line-height:var(--product-copy-leading)} .home-weekly--pinned .home-weekly-scroll{height:calc(100svh + (var(--weekly-count) - 1)*110svh)} .home-weekly--pinned .home-weekly-stage{position:sticky;top:calc(var(--header-height,112px) + var(--admin-offset,0px));height:auto;min-height:0;row-gap:0} .home-weekly--pinned .home-weekly-gallery{display:block;position:relative;grid-column:2;grid-row:1;justify-self:center;width:min(100%,calc((100svh - var(--header-height,112px) - 120px)*1713/1080));aspect-ratio:1713/1080;isolation:isolate} .home-weekly--pinned .home-weekly-frame{position:absolute;inset:0;transform-origin:center center;transition:none;will-change:transform;box-shadow:0 8px 24px #1616160a} .home-weekly--pinned .home-weekly-copy article{grid-row:1;transition:none;will-change:transform,opacity} .home-weekly--pinned :is(.home-weekly-copy article,.home-weekly-frame)[aria-hidden=true]{pointer-events:none} .home-weekly[data-copy=off] .home-weekly-stage{grid-template-columns:minmax(0,1fr)} .home-weekly[data-copy=off] .home-weekly-copy{display:none} .home-weekly[data-copy=off] .home-weekly-gallery{grid-column:1;grid-row:1} .home-weekly[data-copy=off] .home-weekly-frame{grid-column:1;grid-row:auto} .home-weekly[data-copy=off].home-weekly--pinned .home-weekly-stage{grid-template-rows:minmax(0,1fr);gap:0} /* The homepage photo form uses the reference glass treatment; footer metrics stay shared. */ .home-newsletter{--home-section-padding:72px;--photo-credit-size:12px;--photo-credit-inset:clamp(20px,2.5vw,36px);--photo-credit-opacity:.72;--photo-credit-shadow:#16161666;--focus:#161616;width:100%;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:465px;aspect-ratio:1664/876;padding:var(--home-section-padding) 32px;border-radius:var(--media-radius);overflow:hidden;color:#fff;background:#34433b} .home-newsletter-image-picture,.home-newsletter-image{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;object-fit:cover} .home-newsletter:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#16251c08,#16251c30 45%,#16251c20)} .home-newsletter-copy{min-width:0;width:100%;max-width:850px;text-align:center} .home-newsletter-credit{position:absolute;right:var(--photo-credit-inset);bottom:var(--photo-credit-inset);max-width:70%;font-size:var(--photo-credit-size);line-height:1.4;text-align:right;overflow-wrap:anywhere;opacity:var(--photo-credit-opacity);text-shadow:0 1px 6px var(--photo-credit-shadow)} .home-newsletter:has(.home-newsletter-credit){padding-bottom:calc(var(--home-section-padding) + var(--photo-credit-size)*4)} .home-newsletter-copy .section-heading{display:block;margin:0} .home-newsletter-copy .section-heading h2{color:inherit;margin:0;text-wrap:balance} .home-newsletter-copy>p{max-width:620px;margin:24px auto 32px;color:inherit;text-wrap:balance} .home-newsletter-copy .footer-newsletter{width:275px;max-width:100%;margin:0 auto;transition:width 250ms ease-out} .home-newsletter-copy .footer-newsletter:focus-within{width:360px} .home-newsletter .footer-email-field{--field-height:50px;--field-radius:16px;--field-bg:#e3ddcf33;--field-line:transparent;border:0;outline:0;color:#fff;height:var(--field-height);padding:3px;gap:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .home-newsletter .footer-email-field:has(input:focus-visible){box-shadow:none} .home-newsletter .footer-email-field input{border:0;background:transparent;color:inherit;padding:0 16px;min-height:24px;height:24px;border-radius:0;box-shadow:none} .home-newsletter .footer-email-field input::placeholder{color:#fff;opacity:.85} .home-newsletter .footer-email-field button.button{--action-bg:#fff;--action-ink:#161616;--action-line:transparent;--button-height:42px;--button-padding:0 14px;flex:0 0 auto;width:auto;height:var(--button-height);min-height:var(--button-height);padding:var(--button-padding);border-radius:12px;font-size:var(--button-size);font-weight:var(--font-regular,400);background:var(--action-bg);color:var(--action-ink)} .home-newsletter .footer-newsletter-status{font-size:var(--field-size);margin:16px 0 0;color:inherit} .home-newsletter .footer-newsletter-status[data-kind=error]{background:#161b17a6;padding:12px;border-radius:var(--field-radius)} @media(min-width:768px) and (max-width:1279px){:root{--media-radius:56px}} @media(max-width:1099px){ .home-weekly-stage{grid-template-columns:minmax(0,1fr);row-gap:var(--space-6)} .home-weekly-frame,.home-weekly-copy article:nth-child(n){grid-column:1} .home-weekly-frame:nth-child(1){grid-row:2}.home-weekly-copy article:nth-child(1){grid-row:1} .home-weekly-frame:nth-child(2){grid-row:4}.home-weekly-copy article:nth-child(2){grid-row:3} .home-weekly-frame:nth-child(3){grid-row:6}.home-weekly-copy article:nth-child(3){grid-row:5} .home-weekly-frame:not(:nth-child(3)){margin-bottom:var(--space-8)} .home-weekly--pinned .home-weekly-scroll{height:calc(var(--weekly-stage-height,60svh) + (var(--weekly-count) - 1)*var(--weekly-step,55svh))} .home-weekly--pinned .home-weekly-stage{top:var(--weekly-sticky-top,calc(var(--header-height,96px) + var(--admin-offset,0px) + 24px));height:auto;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:start;gap:var(--space-5)} .home-weekly--pinned .home-weekly-gallery{grid-column:1;grid-row:2;width:min(100%,500px,calc((100svh - var(--header-height,96px) - var(--admin-offset,0px) - var(--weekly-copy-height,210px) - 40px)*362/346));aspect-ratio:362/346;z-index:1;clip-path:inset(0 -32px -64px)} .home-weekly--pinned .home-weekly-copy{display:grid;grid-column:1;grid-row:1;position:relative;z-index:2;isolation:isolate} .home-weekly--pinned .home-weekly-copy article:nth-child(n){grid-area:1/1;margin:0} .home-weekly--pinned .home-weekly-frame{aspect-ratio:auto;margin:0} } @media(max-width:767px){ .home-brand-mark{width:80px;height:80px;margin-bottom:24px} .home-newsletter{--home-section-padding:48px;min-height:465px;aspect-ratio:362/463;padding:var(--home-section-padding) 16px} .home-newsletter-copy>p{margin:20px 0 28px} .home-newsletter-credit{max-width:calc(100% - var(--photo-credit-inset)*2)} .home-newsletter .footer-email-field input{padding:0 8px} } @media(prefers-reduced-motion:reduce){.home-weekly-copy article,.home-weekly-frame{animation:none;transition:none}.home-brand-mark{transform:none!important}} /* Shop-only compact height; the homepage and selected mobile art ratio stay independent. */ @media(min-width:768px) { .shop-hero[data-hero-size="compact"] .hero-slide { min-height:clamp(300px,34vw,560px); } } .account-email-notice { padding:20px 24px; border:1px solid #a88bc9; border-radius:var(--radius); background:var(--surface); } .account-email-notice h2 { margin:0 0 var(--space-2); font-size:var(--notice-title-size); line-height:var(--notice-title-leading); } .account-email-notice .woocommerce-info { display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin:0; padding:0; border:0; border-radius:0; background:transparent; font-size:var(--account-type-small,1rem); } .account-email-notice .woocommerce-info .button { order:1; margin:0; } @media(max-width:600px) { .account-email-notice { padding:18px; }.account-email-notice .button { width:100%; } } .home-community{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr));gap:var(--space-6)}.home-community>article{position:relative;background:var(--surface);border-radius:24px;padding:clamp(28px,4vw,56px)}.home-community>article:last-child{background:#22332d;color:#f7f7f2}.home-community h2{font:var(--font-heading,500) var(--section-title-size)/var(--section-title-leading) var(--dfvn-title-font);margin:var(--eyebrow-title-gap) 0 var(--title-lead-gap);}.home-community p{font-size:var(--type-copy-size);line-height:1.7;opacity:.8}.home-community .button{margin-top:18px}.home-community>article>.dfvn-icon{position:absolute;right:30px;top:30px;width:40px;height:40px}.home-community>article:last-child .button{--action-bg:#e2d8ee;--action-ink:#22332d;--action-line:#e2d8ee}