/* ===================================================================== ViCo Green Directory — v3 design system Self-contained: loaded ONLY inside base_directory.html (no Bootstrap/ Bulma). All classes are dir- prefixed for collision safety. Light+dark via tokens; theme is set by [data-theme] on (directory.js), with prefers-color-scheme as the default. Bilingual VI/EN is URL-based (two namespaces), NOT a client toggle — no .vi/.en display switching here. ===================================================================== */ /* ---- fonts (self-hosted, per-subset, full Vietnamese coverage) ---- */ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bvp-400-vietnamese.fe6a292550f5.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:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bvp-400-latin-ext.a46257d03d74.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:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/bvp-400-latin.79141d22ee07.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;} @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/bvp-500-vietnamese.ee80d72b320a.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:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/bvp-500-latin-ext.8565f3e572f7.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:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/bvp-500-latin.4ca4b0de939a.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;} @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/bvp-600-vietnamese.f08f144d6ee5.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:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/bvp-600-latin-ext.0ba9b517e5df.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:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/bvp-600-latin.a4759a77d292.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;} @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bvp-700-vietnamese.d8c5838a2fa6.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:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bvp-700-latin-ext.e227fa0acdf6.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:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bvp-700-latin.85718a3b2569.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;} @font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/spectral-500-vietnamese.33b44579c273.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:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/spectral-500-latin-ext.3ad85686c31f.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:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/spectral-500-latin.d4f6bee97c64.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;} @font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/spectral-600-vietnamese.aafe7714d661.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:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/spectral-600-latin-ext.eb1ee221edf3.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:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/spectral-600-latin.ccd396b92abd.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;} @font-face{font-family:'Spectral';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/spectral-700-vietnamese.61459506f4ac.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:'Spectral';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/spectral-700-latin-ext.bdf8a40902f9.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:'Spectral';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/spectral-700-latin.456f29ac2c8a.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;} /* ================= TOKENS ================= */ :root{ --dir-font-display:"Spectral", Georgia, "Times New Roman", serif; --dir-font-body:"Be Vietnam Pro", -apple-system, "Segoe UI", system-ui, sans-serif; --dir-paper:#F6F3EC; --dir-surface:#FFFFFF; --dir-surface-2:#FBF9F3; --dir-sunken:#EFEBE0; --dir-line:#E4DFD2; --dir-line-strong:#D3CCBB; --dir-ink:#1E241F; --dir-ink-2:#4C534C; --dir-ink-3:#767C73; --dir-purple:#6B2A7E; --dir-purple-2:#833A96; --dir-coral:#E0447E; --dir-pine:#1C6B4B; --dir-pine-2:#248256; --dir-pine-soft:#E3EFE7; --dir-pine-line:#BFD9C9; --dir-listed:#8A8F88; --dir-listed-soft:#ECEAE3; --dir-reviewed:#2F6DB0; --dir-reviewed-soft:#E4EDF6; --dir-verified:#1C6B4B; --dir-verified-soft:#E1EFE6; --dir-amber:#B07A1B; --dir-amber-soft:#F4E9D2; --dir-warn:#BE5330; --dir-r-card:16px; --dir-r-btn:11px; --dir-r-input:11px; --dir-r-pill:999px; --dir-sh-1:0 1px 2px rgba(30,36,31,.06), 0 2px 4px rgba(30,36,31,.04); --dir-sh-2:0 2px 4px rgba(30,36,31,.05), 0 6px 14px rgba(30,36,31,.06), 0 14px 34px rgba(30,36,31,.08); --dir-sh-3:0 4px 10px rgba(30,36,31,.08), 0 18px 55px rgba(30,36,31,.16); --dir-maxw:1200px; --dir-ease:cubic-bezier(.2,.6,.2,1); /* paper grain: tiled fractal noise, blended soft-light onto surfaces */ --dir-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); --dir-surface-grad:linear-gradient(180deg, color-mix(in srgb, var(--dir-surface) 96%, #fff), var(--dir-surface) 55%); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --dir-paper:#121512; --dir-surface:#1A1E1A; --dir-surface-2:#171B17; --dir-sunken:#0E110E; --dir-line:#2A302A; --dir-line-strong:#39413A; --dir-ink:#ECEDE6; --dir-ink-2:#B4B9B0; --dir-ink-3:#868D84; --dir-purple:#C99BD9; --dir-purple-2:#D7B4E3; --dir-coral:#F07AA6; --dir-pine:#5FBB8B; --dir-pine-2:#77C89E; --dir-pine-soft:#17281F; --dir-pine-line:#2C4636; --dir-listed:#9AA096; --dir-listed-soft:#242923; --dir-reviewed:#6FA6DE; --dir-reviewed-soft:#182432; --dir-verified:#5FBB8B; --dir-verified-soft:#16271E; --dir-amber:#D6A34E; --dir-amber-soft:#2C2413; --dir-warn:#E0805C; --dir-sh-1:0 1px 2px rgba(0,0,0,.4); --dir-sh-2:0 2px 8px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.4); --dir-sh-3:0 14px 44px rgba(0,0,0,.55); } } :root[data-theme="dark"]{ --dir-paper:#121512; --dir-surface:#1A1E1A; --dir-surface-2:#171B17; --dir-sunken:#0E110E; --dir-line:#2A302A; --dir-line-strong:#39413A; --dir-ink:#ECEDE6; --dir-ink-2:#B4B9B0; --dir-ink-3:#868D84; --dir-purple:#C99BD9; --dir-purple-2:#D7B4E3; --dir-coral:#F07AA6; --dir-pine:#5FBB8B; --dir-pine-2:#77C89E; --dir-pine-soft:#17281F; --dir-pine-line:#2C4636; --dir-listed:#9AA096; --dir-listed-soft:#242923; --dir-reviewed:#6FA6DE; --dir-reviewed-soft:#182432; --dir-verified:#5FBB8B; --dir-verified-soft:#16271E; --dir-amber:#D6A34E; --dir-amber-soft:#2C2413; --dir-warn:#E0805C; --dir-sh-1:0 1px 2px rgba(0,0,0,.4); --dir-sh-2:0 2px 8px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.4); --dir-sh-3:0 14px 44px rgba(0,0,0,.55); } /* ================= BASE ================= */ *{box-sizing:border-box;} html.dir-root{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body.dir-body{margin:0;color:var(--dir-ink); background-color:var(--dir-paper); background-image:var(--dir-noise); background-blend-mode:soft-light; font-family:var(--dir-font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;} .dir-body h1,.dir-body h2,.dir-body h3,.dir-body h4{font-family:var(--dir-font-display);font-weight:600; line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-.01em;color:var(--dir-ink);} .dir-body a{color:inherit;text-decoration:none;} .dir-body img{max-width:100%;display:block;} .dir-body :focus-visible{outline:2.5px solid var(--dir-pine);outline-offset:2px;border-radius:4px;} .dir-wrap{max-width:var(--dir-maxw);margin:0 auto;padding:0 28px;} .dir-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} @media (prefers-reduced-motion:reduce){.dir-body *{transition:none!important;scroll-behavior:auto!important;}} @media(max-width:640px){.dir-wrap{padding:0 18px;}} /* ================= MASTHEAD ================= */ .dir-masthead{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--dir-surface) 88%,transparent); backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--dir-line); box-shadow:0 4px 18px rgba(30,36,31,.05);} .dir-masthead .dir-wrap{display:flex;align-items:center;gap:14px;height:70px;} .dir-brand{display:flex;align-items:center;gap:13px;flex:none;} .dir-wordmark{font-family:var(--dir-font-display);font-weight:700;font-size:27px;letter-spacing:-.02em;color:var(--dir-ink);} .dir-wordmark span{color:var(--dir-coral);} .dir-brand .dir-lock{border-left:1px solid var(--dir-line-strong);padding-left:13px;line-height:1.1;} .dir-brand .dir-lock .k{font-size:13.5px;font-weight:700;color:var(--dir-pine);} .dir-brand .dir-lock .s{font-size:10.5px;color:var(--dir-ink-3);text-transform:uppercase;letter-spacing:.13em;white-space:nowrap;} @media(max-width:1520px){.dir-brand .dir-lock .s{display:none;}} .dir-nav{display:flex;gap:2px;margin-left:6px;} .dir-nav a{font-size:14.5px;font-weight:500;color:var(--dir-ink-2);padding:9px 13px;border-radius:9px;transition:.15s var(--dir-ease);white-space:nowrap;} .dir-nav a:hover,.dir-nav a.active{color:var(--dir-ink);background:var(--dir-sunken);} .dir-mast-right{margin-left:auto;display:flex;align-items:center;gap:7px;} /* ---- About Us dropdown ---- */ .dir-nav-item{position:relative;display:flex;} .dir-nav-sub-btn{display:inline-flex;align-items:center;gap:5px;font-size:14.5px;font-weight:500;color:var(--dir-ink-2); padding:9px 13px;border-radius:9px;border:0;background:none;cursor:pointer;font-family:inherit;transition:.15s var(--dir-ease);white-space:nowrap;} .dir-nav-sub-btn:hover,.dir-nav-item--sub.open .dir-nav-sub-btn{color:var(--dir-ink);background:var(--dir-sunken);} .dir-nav-sub-btn svg{width:13px;height:13px;transition:transform .15s var(--dir-ease);} .dir-nav-item--sub.open .dir-nav-sub-btn svg{transform:rotate(180deg);} .dir-subnav{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:210px;z-index:60; background:var(--dir-surface);border:1px solid var(--dir-line);border-radius:14px;box-shadow:var(--dir-sh-3); padding:8px;flex-direction:column;} .dir-nav-item--sub.open .dir-subnav,.dir-subnav.open{display:flex;} .dir-subnav a{font-size:14px;font-weight:500;color:var(--dir-ink-2);padding:9px 12px;border-radius:9px;} .dir-subnav a:hover,.dir-subnav a.active{color:var(--dir-ink);background:var(--dir-sunken);} .dir-drawer-grouplabel{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--dir-ink-3); padding:14px 6px 4px;} .dir-drawer-sub{padding-left:18px!important;font-size:15px!important;color:var(--dir-ink-2)!important;} .dir-compare-link{font-size:13px;font-weight:600;color:var(--dir-pine);white-space:nowrap;padding:7px 10px;border-radius:9px;} .dir-compare-link:hover{background:var(--dir-pine-soft);} .dir-newscard--static{cursor:default;} .dir-newscard--static:hover{background:none;} /* ---- for-business FAQ ---- */ .dir-faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px;} .dir-faq-item{background:var(--dir-surface-grad);border:1px solid var(--dir-line);border-radius:14px;padding:18px 22px;box-shadow:var(--dir-sh-1);} .dir-faq-item h4{font-size:16px;margin-bottom:6px;} .dir-faq-item p{font-size:14px;color:var(--dir-ink-2);margin:0;} /* ---- sourcing how-it-works ---- */ .dir-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:820px;margin:28px auto 0;} @media(max-width:640px){.dir-steps{grid-template-columns:1fr;}} .dir-step{background:var(--dir-surface-grad);border:1px solid var(--dir-line);border-radius:14px;padding:18px 20px;box-shadow:var(--dir-sh-1);} .dir-step .sn{width:28px;height:28px;border-radius:50%;background:var(--dir-pine-soft);color:var(--dir-pine);font-weight:700; font-size:14px;display:grid;place-items:center;margin-bottom:10px;} .dir-step p{font-size:13.5px;color:var(--dir-ink-2);margin:0;} .dir-step b{display:block;font-size:14.5px;color:var(--dir-ink);margin-bottom:3px;} .dir-langsw{display:inline-flex;border:1px solid var(--dir-line-strong);border-radius:var(--dir-r-pill);overflow:hidden;font-size:12.5px;font-weight:700;} .dir-langsw a{color:var(--dir-ink-3);padding:5px 11px;} .dir-langsw a.active{background:var(--dir-pine);color:#fff;} .dir-iconbtn{width:38px;height:38px;border-radius:var(--dir-r-pill);border:1px solid var(--dir-line-strong); background:var(--dir-surface);display:grid;place-items:center;color:var(--dir-ink-2);transition:.15s var(--dir-ease);cursor:pointer;position:relative;} .dir-iconbtn:hover{background:var(--dir-sunken);color:var(--dir-ink);} .dir-iconbtn .dir-badge-count{position:absolute;top:-4px;right:-4px;background:var(--dir-coral);color:#fff;font-size:10px; font-weight:700;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px;} .dir-back{font-size:13px;font-weight:600;color:var(--dir-ink-3);padding:7px 12px;border-radius:9px;white-space:nowrap;} .dir-back:hover{color:var(--dir-purple);} .dir-burger{display:none;background:none;border:0;} @media(max-width:1040px){.dir-nav{display:none;}.dir-burger{display:grid;}} @media(max-width:760px){.dir-mast-right a.dir-btn{display:none;}.dir-back{display:none;}} .dir-drawer{display:none;} .dir-drawer[open]{display:block;position:fixed;inset:0;z-index:60;} .dir-drawer .dir-drawer-bg{position:absolute;inset:0;background:rgba(0,0,0,.4);} .dir-drawer .dir-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,84vw);background:var(--dir-surface); padding:24px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--dir-sh-3);} .dir-drawer .dir-drawer-panel a{font-size:16px;font-weight:500;color:var(--dir-ink);padding:11px 6px;border-bottom:1px solid var(--dir-line);} /* ================= BUTTONS ================= */ .dir-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent; border-radius:var(--dir-r-btn);font-weight:600;font-size:14.5px;padding:11px 20px;transition:.16s var(--dir-ease); white-space:nowrap;cursor:pointer;font-family:inherit;} .dir-btn--pine{background:linear-gradient(180deg,var(--dir-pine-2),var(--dir-pine));color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--dir-sh-1);} .dir-btn--pine:hover{background:linear-gradient(180deg,var(--dir-pine-2),var(--dir-pine-2));transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--dir-sh-2);} .dir-btn--purple{background:var(--dir-purple);color:#fff;} .dir-btn--purple:hover{background:var(--dir-purple-2);} .dir-btn--ghost{background:transparent;border-color:var(--dir-line-strong);color:var(--dir-ink);} .dir-btn--ghost:hover{background:var(--dir-surface);border-color:var(--dir-ink-3);} .dir-btn--white{background:#fff;color:var(--dir-purple);} .dir-btn--white:hover{background:#f2ecf4;} .dir-btn--sm{padding:8px 14px;font-size:13px;} .dir-btn--block{width:100%;} .dir-btn svg{width:17px;height:17px;} /* button-anchors: the .dir-body a{color:inherit} reset (0,1,1) would beat a single-class button colour, so pin anchor button text explicitly (0,2,1). */ .dir-body a.dir-btn--pine,.dir-body a.dir-btn--purple{color:#fff;} .dir-body a.dir-btn--white{color:var(--dir-purple);} .dir-body a.dir-btn--ghost{color:var(--dir-ink);} /* ================= SECTIONS ================= */ .dir-section{padding:64px 0;} .dir-section--tight{padding:44px 0;} .dir-section--roomy{padding:84px 0;} .dir-altbg{background:var(--dir-surface-2);border-top:1px solid var(--dir-line);border-bottom:1px solid var(--dir-line);} .dir-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dir-pine); margin-bottom:12px;display:flex;align-items:center;gap:9px;} .dir-eyebrow::before{content:"";width:22px;height:2px;background:var(--dir-pine);border-radius:2px;flex:none;} .dir-sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px;} .dir-sechead h2{font-size:clamp(26px,3.4vw,38px);} .dir-sechead p{color:var(--dir-ink-2);margin:8px 0 0;max-width:56ch;font-size:15px;} .dir-linkmore{color:var(--dir-pine);font-weight:600;font-size:14.5px;white-space:nowrap;} .dir-linkmore:hover{text-decoration:underline;} /* ================= HERO ================= */ .dir-hero{position:relative;overflow:hidden;padding:74px 0 60px; background: radial-gradient(120% 90% at 88% -10%, color-mix(in srgb,var(--dir-purple) 17%,transparent), transparent 60%), radial-gradient(90% 80% at 5% 110%, color-mix(in srgb,var(--dir-pine) 19%,transparent), transparent 55%), var(--dir-paper); border-bottom:1px solid var(--dir-line);} /* grain + a faint contour-ring motif give the hero physical depth */ .dir-hero::before{content:"";position:absolute;inset:0;background:var(--dir-noise);mix-blend-mode:soft-light;pointer-events:none;} .dir-hero::after{content:"";position:absolute;right:-180px;top:-180px;width:640px;height:640px;pointer-events:none; background:repeating-radial-gradient(circle at center, transparent 0 34px, color-mix(in srgb,var(--dir-pine) 22%,transparent) 34px 35px); border-radius:50%;opacity:.5; -webkit-mask-image:radial-gradient(circle at center, #000 30%, transparent 72%); mask-image:radial-gradient(circle at center, #000 30%, transparent 72%);} .dir-hero .dir-wrap{position:relative;z-index:2;} .dir-hero h1{font-size:clamp(36px,5.4vw,60px);font-weight:600;max-width:20ch;letter-spacing:-.025em;} .dir-hero .dir-sub{font-size:clamp(16px,2vw,20px);color:var(--dir-ink-2);margin:20px 0 0;max-width:58ch;} .dir-searchbar{margin-top:32px;display:flex;background:var(--dir-surface);border:1px solid var(--dir-line-strong); border-radius:var(--dir-r-pill);box-shadow:var(--dir-sh-2);padding:8px 8px 8px 10px;max-width:880px;align-items:center;} .dir-searchbar select{appearance:none;border:0;background:transparent;font-family:inherit;font-size:14.5px;font-weight:600; color:var(--dir-ink-2);padding:0 30px 0 16px;border-right:1px solid var(--dir-line);cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767C73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;} .dir-searchbar input{flex:1;border:0;background:transparent;font-family:inherit;font-size:16.5px;color:var(--dir-ink);padding:16px 20px;min-width:60px;} .dir-searchbar input::placeholder{color:var(--dir-ink-3);} .dir-searchbar input:focus,.dir-searchbar select:focus{outline:none;} @media(max-width:560px){.dir-searchbar{flex-wrap:wrap;border-radius:20px;}.dir-searchbar select{border-right:0;width:100%;padding:8px 16px;}.dir-searchbar input{width:100%;}} .dir-intent{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px;align-items:center;} .dir-intent .lab{font-size:13px;color:var(--dir-ink-3);font-weight:600;} .dir-chip{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--dir-ink); background:var(--dir-surface);border:1px solid var(--dir-line-strong);border-radius:var(--dir-r-pill);padding:7px 14px;transition:.15s var(--dir-ease);} .dir-chip:hover{border-color:var(--dir-pine);color:var(--dir-pine);background:var(--dir-pine-soft);} .dir-chip .dot{width:8px;height:8px;border-radius:50%;flex:none;} .dir-chip--sm{padding:5px 11px;font-size:12.5px;} .dir-chip .ct{font-size:12px;color:var(--dir-ink-3);font-variant-numeric:tabular-nums;} .dir-chip.on{background:var(--dir-pine-soft);border-color:var(--dir-pine);color:var(--dir-pine);} .dir-chip.on .ct{color:var(--dir-pine);} .dir-trust{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--dir-line); border:1px solid var(--dir-line);border-radius:var(--dir-r-card);overflow:hidden;box-shadow:var(--dir-sh-2);} .dir-trust .cell{background:var(--dir-surface-grad);padding:26px 28px;border-top:2px solid color-mix(in srgb,var(--dir-pine) 45%,transparent);} .dir-trust .n{font-family:var(--dir-font-display);font-size:40px;font-weight:600;color:var(--dir-pine);font-variant-numeric:tabular-nums;letter-spacing:-.02em;} .dir-trust .l{font-size:13.5px;color:var(--dir-ink-2);margin-top:2px;} @media(max-width:720px){.dir-trust{grid-template-columns:repeat(2,1fr);}} /* ================= CATEGORY TILES ================= */ .dir-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} @media(max-width:1024px){.dir-tiles{grid-template-columns:repeat(3,1fr);}} @media(max-width:760px){.dir-tiles{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.dir-tiles{grid-template-columns:1fr;}.dir-tile{aspect-ratio:3/2;}} .dir-tile{position:relative;border-radius:var(--dir-r-card);overflow:hidden;aspect-ratio:5/4;display:block; box-shadow:var(--dir-sh-2);transition:.2s var(--dir-ease);border:1px solid var(--dir-line);} .dir-tile:hover{transform:translateY(-3px);box-shadow:var(--dir-sh-3);} .dir-tile .art{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .45s var(--dir-ease);} .dir-tile:hover .art{transform:scale(1.045);} .dir-tile .art::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(15,22,17,.12),transparent 30%,color-mix(in srgb,var(--dir-pine) 26%,transparent)),var(--dir-noise); mix-blend-mode:multiply;} .dir-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none;z-index:3;} .dir-tile .glyph{position:absolute;top:16px;left:16px;width:40px;height:40px;color:#fff;opacity:.92;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35));} .dir-tile .cap{position:absolute;left:0;right:0;bottom:0;padding:38px 18px 16px;z-index:2; background:linear-gradient(to top,rgba(15,22,17,.92),rgba(15,22,17,.25) 65%,transparent);color:#fff;} .dir-tile .cap .nm{font-family:var(--dir-font-display);font-weight:600;font-size:18px;line-height:1.15;} .dir-tile .cap .ct{font-size:12.5px;opacity:.9;margin-top:3px;font-weight:500;} .dir-tile .cap .ct b{font-weight:700;} .dir-tile--hidden{display:none;} .dir-tiles--expanded .dir-tile--hidden{display:block;} .dir-tile--more{background:var(--dir-surface-grad);display:flex;align-items:center;justify-content:center; text-align:center;padding:18px;cursor:pointer;font-family:inherit;color:var(--dir-pine);font-weight:600;font-size:15px;} .dir-tile--more:hover{border-color:var(--dir-pine);background:var(--dir-pine-soft);} .dir-tile--more .txt{max-width:16ch;} /* ================= LISTING CARDS ================= */ .dir-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .dir-cards--2{grid-template-columns:repeat(2,1fr);} @media(max-width:920px){.dir-cards{grid-template-columns:repeat(2,1fr);}} @media(max-width:600px){.dir-cards{grid-template-columns:1fr;}} .dir-card{background:var(--dir-surface-grad);border:1px solid var(--dir-line-strong);border-radius:var(--dir-r-card);overflow:hidden; box-shadow:var(--dir-sh-2);transition:.18s var(--dir-ease);display:flex;flex-direction:column;} .dir-card:hover{transform:translateY(-3px);box-shadow:var(--dir-sh-2);border-color:var(--dir-line-strong);} .dir-card--feat{border-color:var(--dir-amber);box-shadow:0 0 0 1px var(--dir-amber) inset, var(--dir-sh-1);} .dir-card .photo{aspect-ratio:16/9;position:relative;background:var(--dir-sunken);} .dir-card .photo img{width:100%;height:100%;object-fit:cover;} .dir-card .photo .featlab{position:absolute;top:12px;left:12px;background:var(--dir-amber);color:#fff;font-size:11px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:var(--dir-r-pill);z-index:2;} .dir-savebtn{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:0; background:rgba(255,255,255,.92);color:#4C534C;display:grid;place-items:center;box-shadow:var(--dir-sh-1);cursor:pointer;z-index:2;} .dir-savebtn{opacity:.78;} .dir-savebtn:hover{opacity:1;color:var(--dir-coral);} .dir-savebtn.saved{color:var(--dir-coral);} .dir-savebtn.saved svg{fill:currentColor;} .dir-card .body{padding:16px 17px 17px;display:flex;flex-direction:column;gap:10px;flex:1;} .dir-card .toprow{display:flex;align-items:center;gap:11px;} .dir-mono{border-radius:11px;flex:none;display:grid;place-items:center;overflow:hidden; font-family:var(--dir-font-display);font-weight:700;color:#fff;box-shadow:var(--dir-sh-1);width:44px;height:44px;font-size:18px;} .dir-mono img{width:100%;height:100%;object-fit:cover;} .dir-card .nm{font-family:var(--dir-font-display);font-weight:600;font-size:19px;line-height:1.15;} .dir-card .meta{font-size:12.5px;color:var(--dir-ink-3);margin-top:1px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;} .dir-card .desc{font-size:13.5px;color:var(--dir-ink-2);line-height:1.5;} .dir-card .foot{margin-top:auto;padding-top:11px;border-top:1px solid var(--dir-line);display:flex;align-items:center;justify-content:space-between;gap:10px;} .dir-card .certs{display:flex;gap:5px;flex-wrap:wrap;} /* ================= TRUST COMPONENTS ================= */ .dir-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;border-radius:var(--dir-r-pill); padding:4px 11px 4px 8px;letter-spacing:.01em;} .dir-badge svg{width:13px;height:13px;} .dir-badge--listed{background:var(--dir-listed-soft);color:var(--dir-ink-2);} .dir-badge--reviewed,.dir-badge--documented{background:var(--dir-reviewed-soft);color:var(--dir-reviewed);} .dir-badge--verified{background:var(--dir-verified-soft);color:var(--dir-verified);} .dir-card .photo:not(:has(img))::after,.dir-rrow .rimg:not(:has(img))::after{content:"";position:absolute;inset:0; background:linear-gradient(155deg,rgba(255,255,255,.22),transparent 45%,rgba(15,22,17,.16)),var(--dir-noise); mix-blend-mode:soft-light;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);} .dir-card .photo,.dir-rrow .rimg{position:relative;} /* ---- paid-tier image placeholders (free listings show these instead) ---- */ .dir-logo-ph{border-radius:11px;flex:none;width:44px;height:44px;display:grid;place-items:center; background:var(--dir-sunken);border:1px dashed var(--dir-line-strong);color:var(--dir-ink-3);} .dir-logo-ph::after{content:"";width:20px;height:20px; background:currentColor;opacity:.55; -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 10h1m4 0h1M9 14h1m4 0h1'/%3E%3C/svg%3E"); mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M3 21h18M5 21V7l7-4 7 4v14M9 10h1m4 0h1M9 14h1m4 0h1'/%3E%3C/svg%3E");} .dir-imgph{aspect-ratio:21/6;border-radius:var(--dir-r-card);border:1px dashed var(--dir-line-strong); background:repeating-linear-gradient(-45deg, var(--dir-sunken) 0 18px, color-mix(in srgb,var(--dir-sunken) 82%,var(--dir-surface)) 18px 36px); display:grid;place-items:center;padding:20px;} .dir-imgph span{font-size:13.5px;font-weight:600;color:var(--dir-ink-3);background:var(--dir-surface); border:1px solid var(--dir-line-strong);border-radius:var(--dir-r-pill);padding:8px 16px;box-shadow:var(--dir-sh-1);text-align:center;} .dir-badge--lg{font-size:13.5px;padding:6px 14px 6px 11px;} .dir-qmark{width:15px;height:15px;border-radius:50%;border:1.3px solid currentColor;font-size:10px;font-weight:700; display:inline-grid;place-items:center;opacity:.6;text-decoration:none;color:inherit;} .dir-certchip{font-size:11px;font-weight:600;color:var(--dir-ink-2);background:var(--dir-surface-2); border:1px solid var(--dir-line-strong);border-radius:var(--dir-r-pill);padding:3px 9px;display:inline-flex;align-items:center;gap:5px;} .dir-certchip .cd{width:6px;height:6px;border-radius:50%;background:var(--dir-pine);flex:none;} .dir-score{display:inline-flex;gap:3px;align-items:center;} .dir-score .pill{width:7px;height:7px;border-radius:50%;background:var(--dir-listed);opacity:.28;} .dir-score .pill.on{background:var(--dir-pine);opacity:1;} .dir-scorewrap{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--dir-ink-3);font-weight:600;} .dir-resp{font-size:12px;color:var(--dir-ink-2);font-weight:600;display:inline-flex;align-items:center;gap:5px;} .dir-resp .rd{width:7px;height:7px;border-radius:50%;background:var(--dir-pine);flex:none;} .dir-sample{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--dir-amber);background:var(--dir-amber-soft);border-radius:var(--dir-r-pill);padding:3px 9px;} .dir-sample--sm{padding:1px 7px;font-size:9.5px;} .dir-best-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--dir-amber); background:var(--dir-amber-soft);border-radius:8px;padding:4px 10px;letter-spacing:.01em;} .dir-best-badge svg{flex:none;} .dir-samplebar{background:var(--dir-amber-soft);border-bottom:1px solid color-mix(in srgb,var(--dir-amber) 40%,transparent);} .dir-samplebar .dir-wrap{display:flex;gap:11px;align-items:center;padding:11px 28px;font-size:13px;color:var(--dir-ink-2);} .dir-samplebar b{color:var(--dir-ink);} .dir-samplebar svg{width:18px;height:18px;color:var(--dir-amber);flex:none;} /* ================= NEWS ================= */ .dir-newsgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;} @media(max-width:820px){.dir-newsgrid{grid-template-columns:1fr;}} .dir-newscard{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--dir-line);} .dir-newscard .th{width:120px;aspect-ratio:4/3;border-radius:12px;flex:none;box-shadow:var(--dir-sh-1);background-size:cover;background-position:center;background-color:var(--dir-sunken);} .dir-newscard .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--dir-purple);} .dir-newscard h4{font-size:16px;margin:5px 0 6px;line-height:1.25;} .dir-newscard p{font-size:13px;color:var(--dir-ink-2);margin:0;} .dir-newscard .tag{font-size:11.5px;color:var(--dir-pine);font-weight:600;margin-top:7px;} .dir-reclist{background:var(--dir-surface-grad);border:1px solid var(--dir-line);border-radius:var(--dir-r-card);padding:8px 20px;box-shadow:var(--dir-sh-1);} .dir-recitem{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--dir-line);} .dir-recitem:last-child{border-bottom:0;} .dir-recitem .nm{font-weight:600;font-size:14px;} .dir-recitem .mt{font-size:12px;color:var(--dir-ink-3);} /* ================= BAND + PRICING ================= */ .dir-band{border-radius:22px;padding:40px 44px;position:relative;overflow:hidden;color:#fff; background:radial-gradient(120% 130% at 100% 0%, color-mix(in srgb,var(--dir-purple) 92%, #000), var(--dir-purple) 40%, #3f1a4b 100%); box-shadow:var(--dir-sh-3), inset 0 1px 0 rgba(255,255,255,.14);} .dir-band::before{content:"";position:absolute;inset:0;background:var(--dir-noise);mix-blend-mode:soft-light;pointer-events:none;opacity:.8;} .dir-band>*{position:relative;} .dir-band h2{color:#fff;font-size:clamp(23px,3vw,31px);max-width:28ch;} .dir-band p{color:rgba(255,255,255,.82);max-width:52ch;margin:12px 0 0;font-size:15.5px;} .dir-band .dir-eyebrow{color:rgba(255,255,255,.8);} .dir-band .dir-eyebrow::before{background:rgba(255,255,255,.8);} .dir-band-row{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;} .dir-pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} @media(max-width:1040px){.dir-pricing{grid-template-columns:repeat(2,1fr);}} @media(max-width:640px){.dir-pricing{grid-template-columns:1fr;}} .dir-plan{background:var(--dir-surface-grad);border:1px solid var(--dir-line);border-radius:var(--dir-r-card);padding:26px 24px;box-shadow:var(--dir-sh-1);display:flex;flex-direction:column;} .dir-plan--hot{border-color:var(--dir-pine);box-shadow:0 0 0 1px var(--dir-pine) inset,var(--dir-sh-3);transform:translateY(-6px);} @media(max-width:1040px){.dir-plan--hot{transform:none;}} .dir-plan .pr .usd{font-size:13px;color:var(--dir-ink-3);font-weight:500;font-family:var(--dir-font-body);margin-left:6px;} .dir-plan .addon{font-size:12px;color:var(--dir-ink-3);border-top:1px dashed var(--dir-line-strong);padding-top:10px;margin-top:4px;} .dir-plan .tier{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--dir-pine);} .dir-plan .pr{font-family:var(--dir-font-display);font-size:30px;font-weight:600;margin:10px 0 2px;} .dir-plan .pr small{font-size:14px;color:var(--dir-ink-3);font-weight:400;font-family:var(--dir-font-body);} .dir-plan ul{list-style:none;padding:0;margin:16px 0 20px;display:flex;flex-direction:column;gap:9px;flex:1;} .dir-plan li{font-size:13.5px;color:var(--dir-ink-2);display:flex;gap:9px;align-items:flex-start;} .dir-plan li svg{width:16px;height:16px;color:var(--dir-pine);flex:none;margin-top:2px;} /* ================= BREADCRUMB / PAGE HEAD ================= */ .dir-pagehead{padding:34px 0 6px;} .dir-bc{font-size:13px;color:var(--dir-ink-3);margin-bottom:9px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;} .dir-bc a{color:var(--dir-pine);font-weight:600;} .dir-pagehead h1{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.02em;} .dir-pagehead .lead{color:var(--dir-ink-2);margin:10px 0 0;max-width:64ch;font-size:15.5px;} /* ================= LISTING DETAIL ================= */ .dir-detail{display:grid;grid-template-columns:1.7fr 1fr;gap:34px;align-items:start;padding-bottom:20px;} @media(max-width:900px){.dir-detail{grid-template-columns:1fr;}} .dir-gallery{border-radius:var(--dir-r-card);overflow:hidden;box-shadow:var(--dir-sh-2);border:1px solid var(--dir-line);} .dir-gallery:has(.dir-imgph):not(:has(img)){border:0;box-shadow:none;overflow:visible;} .dir-gallery .hero-img{aspect-ratio:16/9;position:relative;background:var(--dir-sunken);} .dir-gallery .hero-img img{width:100%;height:100%;object-fit:cover;} .dir-gallery .hero-img.placeholder{display:grid;place-items:center;color:var(--dir-ink-3);font-size:14px;} .dir-gallery .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--dir-line);} .dir-gallery .strip a{aspect-ratio:16/10;background:var(--dir-sunken);background-size:cover;background-position:center;} .dir-dhead{display:flex;gap:16px;align-items:flex-start;margin:22px 0 0;} .dir-dhead .dir-mono{width:64px;height:64px;border-radius:15px;font-size:26px;} .dir-dhead .dir-logo-ph{width:64px;height:64px;border-radius:15px;border-style:solid;background:var(--dir-pine-soft);color:var(--dir-pine);} .dir-dhead h1{font-size:30px;letter-spacing:-.02em;} .dir-dmeta{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13.5px;color:var(--dir-ink-2);} .dir-dmeta .mi{display:inline-flex;align-items:center;gap:6px;} .dir-dmeta .mi svg{width:15px;height:15px;color:var(--dir-ink-3);} .dir-about{margin-top:22px;font-size:15px;color:var(--dir-ink-2);line-height:1.65;} .dir-dsec{margin-top:26px;} .dir-dsec h3{font-size:18px;margin-bottom:13px;padding-bottom:9px;border-bottom:1px solid var(--dir-line);} .dir-socials{display:flex;gap:9px;flex-wrap:wrap;} .dir-soc{width:40px;height:40px;border-radius:11px;border:1px solid var(--dir-line-strong);background:var(--dir-surface); display:grid;place-items:center;color:var(--dir-ink-2);transition:.15s var(--dir-ease);} .dir-soc:hover{color:var(--dir-pine);border-color:var(--dir-pine);background:var(--dir-pine-soft);} .dir-soc svg{width:18px;height:18px;} .dir-claimrow{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--dir-line);font-size:14px;} .dir-claimrow svg{width:18px;height:18px;color:var(--dir-pine);flex:none;margin-top:1px;} .dir-claimrow .ev{margin-left:auto;font-size:12px;color:var(--dir-pine);font-weight:600;white-space:nowrap;} .dir-credrow{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--dir-line);} .dir-credrow .ci{width:38px;height:38px;border-radius:10px;background:var(--dir-pine-soft);color:var(--dir-pine);display:grid;place-items:center;flex:none;} .dir-credrow .ci svg{width:19px;height:19px;} .dir-credrow .cn{font-weight:600;font-size:14px;} .dir-credrow .cm{font-size:12px;color:var(--dir-ink-3);} .dir-credrow.expired .cn{text-decoration:line-through;color:var(--dir-ink-3);} .dir-credrow.expired .ci{background:var(--dir-amber-soft);color:var(--dir-warn);} .dir-credrow .exp{margin-left:auto;font-size:11.5px;color:var(--dir-warn);font-weight:600;text-align:right;} .dir-credrow .valid{margin-left:auto;font-size:11.5px;color:var(--dir-pine);font-weight:600;} .dir-doc{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--dir-line);font-size:14px;} .dir-doc svg{width:18px;height:18px;color:var(--dir-ink-3);flex:none;} .dir-doc a{color:var(--dir-pine);font-weight:600;margin-left:auto;font-size:12.5px;} .dir-offergrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;} @media(max-width:560px){.dir-offergrid{grid-template-columns:1fr;}} .dir-dside{position:sticky;top:88px;display:flex;flex-direction:column;gap:16px;} @media(max-width:900px){.dir-dside{position:static;}} .dir-panel{background:var(--dir-surface-grad);border:1px solid var(--dir-line);border-radius:var(--dir-r-card);padding:20px;box-shadow:var(--dir-sh-1);} .dir-panel h4{font-family:var(--dir-font-body);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--dir-ink-3);margin-bottom:14px;} .dir-scorefull{display:flex;flex-direction:column;gap:11px;} .dir-scorefull .row{display:flex;align-items:center;gap:12px;} .dir-scorefull .row .lb{font-size:13px;color:var(--dir-ink-2);width:104px;} .dir-map{aspect-ratio:16/11;border-radius:12px;overflow:hidden;position:relative;border:1px solid var(--dir-line);background:var(--dir-sunken);} .dir-map .lmap{position:absolute;inset:0;} .dir-provrow{font-size:12px;color:var(--dir-ink-3);margin-top:12px;display:flex;gap:7px;align-items:flex-start;} .dir-provrow svg{width:13px;height:13px;flex:none;margin-top:2px;} .dir-actionbtns{display:flex;flex-direction:column;gap:9px;} .dir-stickybar{display:none;} @media(max-width:900px){.dir-stickybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:8px; background:var(--dir-surface);border-top:1px solid var(--dir-line);padding:10px 16px;box-shadow:0 -4px 20px rgba(0,0,0,.08);} .dir-stickybar .dir-btn{flex:1;} body.dir-body:has(.dir-stickybar){padding-bottom:76px;} .dir-dside .dir-actionbtns a.dir-btn--pine,.dir-dside .dir-actionbtns a.dir-btn--purple{display:none;}} /* ================= SEARCH ================= */ .dir-searchlayout{display:grid;grid-template-columns:270px 1fr;gap:28px;align-items:start;} @media(max-width:820px){.dir-searchlayout{grid-template-columns:1fr;}} .dir-facets{background:var(--dir-surface-grad);border:1px solid var(--dir-line);border-radius:var(--dir-r-card);padding:6px 20px 14px;box-shadow:var(--dir-sh-1);position:sticky;top:88px;} .dir-facetgrp{padding:16px 0;border-bottom:1px solid var(--dir-line);} .dir-facetgrp:last-child{border-bottom:0;} .dir-facetgrp .ft{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--dir-ink-3);margin-bottom:11px;} .dir-facetopt{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13.5px;color:var(--dir-ink-2);} .dir-facetopt .cb{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--dir-line-strong);flex:none;} .dir-facetopt.on .cb{background:var(--dir-pine);border-color:var(--dir-pine);position:relative;} .dir-facetopt.on .cb::after{content:"";position:absolute;inset:0;background:no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");} .dir-facetopt .ct{margin-left:auto;font-size:12px;color:var(--dir-ink-3);font-variant-numeric:tabular-nums;} .dir-catdetails{border-bottom:1px solid var(--dir-line);} .dir-catdetails:last-child{border-bottom:0;} .dir-catdetails summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:2px 0;} .dir-catdetails summary::-webkit-details-marker{display:none;} .dir-catdetails .dir-catarrow{width:18px;height:18px;flex:none;margin-left:2px; display:flex;align-items:center;justify-content:center;border-radius:5px; border:0;background-color:transparent;padding:0;cursor:pointer; background-repeat:no-repeat;background-position:center;background-size:8px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767b73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E"); transition:transform .15s var(--dir-ease),background-color .15s var(--dir-ease);} .dir-catdetails .dir-catarrow:hover{background-color:var(--dir-line);} .dir-catdetails[open] .dir-catarrow{transform:rotate(90deg);} .dir-catdetails summary .dir-facetopt{flex:1;padding:5px 0;} .dir-catchildren{padding:0 0 6px 20px;} .dir-facetopt--child{font-size:13px;} .dir-resbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;} .dir-resbar .rc{font-size:14px;color:var(--dir-ink-2);} .dir-resbar .rc b{color:var(--dir-ink);font-weight:700;} .dir-sortsel{display:inline-flex;align-items:center;border:1px solid var(--dir-line-strong);border-radius:var(--dir-r-btn);background:var(--dir-surface);overflow:hidden;} .dir-sortsel select{appearance:none;border:0;background:transparent;font-family:inherit;font-weight:600;font-size:13.5px;color:var(--dir-ink); padding:9px 30px 9px 14px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767C73' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:13px;} .dir-viewtog{display:inline-flex;border:1px solid var(--dir-line-strong);border-radius:var(--dir-r-btn);overflow:hidden;} .dir-viewtog a{background:var(--dir-surface);padding:8px 11px;color:var(--dir-ink-3);display:grid;place-items:center;} .dir-viewtog a.active{background:var(--dir-pine);color:#fff;} .dir-applied{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;} .dir-appchip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;background:var(--dir-pine-soft);color:var(--dir-pine); border:1px solid var(--dir-pine-line);border-radius:var(--dir-r-pill);padding:5px 8px 5px 12px;} .dir-appchip a{color:var(--dir-pine);font-size:15px;line-height:1;padding:0 2px;} .dir-rrow{display:flex;gap:16px;background:var(--dir-surface-grad);border:1px solid var(--dir-line);border-radius:var(--dir-r-card); padding:16px;box-shadow:var(--dir-sh-1);transition:.16s var(--dir-ease);margin-bottom:14px;position:relative;} .dir-rrow:hover{box-shadow:var(--dir-sh-2);transform:translateY(-2px);} .dir-rrow .rimg{width:150px;aspect-ratio:4/3;border-radius:12px;flex:none;position:relative;overflow:hidden;background:var(--dir-sunken);} .dir-rrow .rimg img{width:100%;height:100%;object-fit:cover;} .dir-rrow .rbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;} .dir-rrow .rtop{display:flex;align-items:flex-start;gap:12px;} .dir-rrow .rnm{font-family:var(--dir-font-display);font-weight:600;font-size:19.5px;} .dir-rrow .rmeta{font-size:12.5px;color:var(--dir-ink-3);margin-top:2px;} .dir-rrow .rdesc{font-size:13.5px;color:var(--dir-ink-2);line-height:1.5;} .dir-rrow .rfoot{margin-top:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:6px;} @media(max-width:560px){.dir-rrow .rimg{display:none;}} .dir-filterbtn{display:none;} @media(max-width:820px){ .dir-facets{display:none;} .dir-facets.sheet-open{display:block;position:fixed;inset:0;z-index:60;border-radius:0;overflow-y:auto;padding:20px 24px 90px;} .dir-filterbtn{display:inline-flex;} } /* ================= SPONSOR + CATEGORY BANNER ================= */ .dir-sponsor{display:flex;align-items:center;gap:16px;background:var(--dir-surface-2);border:1px solid var(--dir-line); border-radius:var(--dir-r-card);padding:14px 20px;margin-bottom:24px;} .dir-sponsor img{max-height:40px;width:auto;} .dir-sponsor .lbl{margin-left:auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--dir-ink-3);} .dir-catbanner{aspect-ratio:24/7;border-radius:var(--dir-r-card);overflow:hidden;margin-bottom:24px;background:var(--dir-sunken);background-size:cover;background-position:center;position:relative;box-shadow:var(--dir-sh-2);} .dir-catbanner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,22,17,.5),transparent 55%),linear-gradient(to top,rgba(15,22,17,.35),transparent 40%);} /* ================= FORMS ================= */ .dir-formwrap{max-width:760px;margin:0 auto;} .dir-formcard{background:var(--dir-surface-grad);border:1px solid var(--dir-line);border-radius:var(--dir-r-card);padding:28px 30px;box-shadow:var(--dir-sh-1);margin-bottom:20px;} .dir-formcard h3{font-size:18px;margin-bottom:4px;} .dir-formcard .hint{font-size:13px;color:var(--dir-ink-3);margin:0 0 18px;} .dir-field{margin-bottom:16px;} .dir-field label{display:block;font-size:13.5px;font-weight:600;color:var(--dir-ink);margin-bottom:6px;} .dir-field .req{color:var(--dir-warn);} .dir-field .fhint{font-size:12px;color:var(--dir-ink-3);font-weight:400;margin-left:4px;} .dir-input,.dir-textarea,.dir-select{width:100%;border:1px solid var(--dir-line-strong);border-radius:var(--dir-r-input); background:var(--dir-surface-2);font-family:inherit;font-size:14.5px;color:var(--dir-ink);padding:11px 13px;transition:.15s var(--dir-ease);} .dir-input:focus,.dir-textarea:focus,.dir-select:focus{outline:none;border-color:var(--dir-pine);background:var(--dir-surface);box-shadow:0 0 0 3px var(--dir-pine-soft);} .dir-textarea{min-height:110px;resize:vertical;} .dir-row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;} @media(max-width:560px){.dir-row2{grid-template-columns:1fr;}} .dir-repeat-row{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start;} .dir-repeat-row .dir-input{flex:1;} .dir-addrow{font-size:13px;font-weight:600;color:var(--dir-pine);cursor:pointer;background:none;border:0;padding:4px 0;} .dir-errors{background:color-mix(in srgb,var(--dir-warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--dir-warn) 40%,transparent); border-radius:10px;padding:12px 16px;font-size:13.5px;color:var(--dir-warn);margin-bottom:16px;} .dir-toast{background:var(--dir-pine-soft);border:1px solid var(--dir-pine-line);color:var(--dir-pine);border-radius:10px;padding:12px 16px;font-size:14px;margin-bottom:16px;} .dir-hp{position:absolute!important;left:-9999px;top:-9999px;} /* ================= PAGINATION + EMPTY + MT ================= */ .dir-pager{display:flex;gap:6px;justify-content:center;margin-top:32px;flex-wrap:wrap;} .dir-pager a,.dir-pager span{min-width:38px;height:38px;display:grid;place-items:center;border-radius:10px; border:1px solid var(--dir-line-strong);font-size:14px;font-weight:600;color:var(--dir-ink-2);background:var(--dir-surface);padding:0 10px;} .dir-pager a:hover{border-color:var(--dir-pine);color:var(--dir-pine);} .dir-pager .cur{background:var(--dir-pine);color:#fff;border-color:var(--dir-pine);} .dir-pager .disabled{opacity:.4;} .dir-empty{text-align:center;padding:60px 20px;color:var(--dir-ink-3);} .dir-empty svg{width:44px;height:44px;color:var(--dir-line-strong);margin-bottom:16px;} .dir-empty h3{font-size:20px;color:var(--dir-ink);margin-bottom:8px;} .dir-empty p{max-width:44ch;margin:0 auto 18px;font-size:14.5px;} .dir-mtflag{font-size:11px;color:var(--dir-ink-3);font-style:italic;margin-top:4px;display:inline-flex;align-items:center;gap:5px;} /* compare table */ .dir-compare-scroll{overflow-x:auto;} .dir-compare{border-collapse:separate;border-spacing:0;width:100%;min-width:640px;} .dir-compare th,.dir-compare td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--dir-line);vertical-align:top;font-size:13.5px;} .dir-compare thead th{background:var(--dir-surface-2);font-family:var(--dir-font-display);font-size:16px;} .dir-compare tbody th{font-weight:600;color:var(--dir-ink-3);font-size:12px;text-transform:uppercase;letter-spacing:.05em;width:150px;} /* ================= FOOTER ================= */ .dir-footer{background:var(--dir-surface-2);border-top:1px solid var(--dir-line);padding:56px 0 34px;margin-top:20px;position:relative;} .dir-footer::before{content:"";position:absolute;inset:0;background:var(--dir-noise);mix-blend-mode:soft-light;pointer-events:none;} .dir-footer>*{position:relative;} .dir-fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:30px;} @media(max-width:820px){.dir-fgrid{grid-template-columns:1fr 1fr;}} .dir-fcol h5{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--dir-ink-3);margin:0 0 13px;} .dir-fcol a{display:block;font-size:13.5px;color:var(--dir-ink-2);padding:4px 0;} .dir-fcol a:hover{color:var(--dir-pine);} .dir-fbrand .dir-wordmark{font-size:24px;} .dir-fbrand p{font-size:13px;color:var(--dir-ink-3);margin:12px 0 0;max-width:34ch;} .dir-fbot{margin-top:40px;padding-top:22px;border-top:1px solid var(--dir-line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--dir-ink-3);align-items:center;} .dir-themebtn{background:none;border:1px solid var(--dir-line-strong);border-radius:var(--dir-r-pill);color:var(--dir-ink-3); font-size:12.5px;font-weight:600;padding:5px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;} .dir-themebtn:hover{color:var(--dir-ink);border-color:var(--dir-ink-3);} .dir-themebtn svg{width:15px;height:15px;} /* dark mode: pine fills are light greens; white text fails contrast */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dir-btn--pine,:root:not([data-theme="light"]) .dir-body a.dir-btn--pine{color:#0E1F16;}} :root[data-theme="dark"] .dir-btn--pine,:root[data-theme="dark"] .dir-body a.dir-btn--pine{color:#0E1F16;} /* phased claim policy notice (claim.html) -- Tom's directive, 260715 */ .dir-phase-notice{background:var(--dir-amber-soft);border:1px solid var(--dir-amber);border-radius:9px;padding:12px 16px;margin-bottom:16px;}