/* NextGen Digital Agency: Navy + Orange brand on GeneratePress. Sticky light header, dark navy hero with an order dashboard, light working pages with alternating tinted bands, orange for every buy action, navy footer. Motion only runs when html.ngda-motion is set (JS on, reduced motion off). */ :root { --ink: #0b1b3f; --ink-2: #172b5c; --ink-3: #22396f; --bg: #f3f6fb; --tint: #e8eef9; --surface: #ffffff; --text: #0e1a33; --muted: #56627d; --line: #d9e1ee; --sun: #ff6b2c; --sun-hover: #ff8452; --sun-ink: #0b1b3f; --accent-text: #c2410c; --leaf: #12a372; --leaf-soft: #e1f6ee; --on-ink: #eef3ff; --on-ink-muted: #a9b6d3; --c-blue: #2563eb; --c-green: #0f9f6e; --c-purple: #7c3aed; --c-orange: #ea580c; --radius: 16px; --header-h: 72px; --ease: cubic-bezier(.2, .7, .2, 1); --f-display: "Sora", "Segoe UI", system-ui, sans-serif; --f-body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif; } /* ---------- Base ---------- */ html { scroll-padding-top: calc(var(--header-h) + 12px); } body { background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--f-display); color: inherit; letter-spacing: -.02em; text-wrap: balance; } p { text-wrap: pretty; } a { color: var(--accent-text); } a:hover, a:focus { color: var(--ink); } :focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--sun); color: var(--sun-ink); } img { max-width: 100%; height: auto; } .ngda-icon { flex: none; } /* ---------- Buttons (theme + WooCommerce + GeneratePress) ---------- */ .btn, input[type="submit"], .button, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 22px; border-radius: 12px; border: 1.5px solid transparent; font-family: var(--f-body); font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s; cursor: pointer; } .btn-sun, input[type="submit"], .button, .wp-block-button__link, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #place_order, .woocommerce a.button, .woocommerce button.button { background: var(--sun); color: var(--sun-ink); box-shadow: 0 8px 22px -10px var(--sun); } .btn-sun:hover, input[type="submit"]:hover, .button:hover, .wp-block-button__link:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--sun-hover); color: var(--sun-ink); transform: translateY(-1px); box-shadow: 0 12px 26px -10px var(--sun); } .btn-line { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: none; } .btn-line:hover { border-color: var(--text); color: var(--text); } .btn-ghost-dark { background: rgba(255, 255, 255, .04); color: var(--on-ink); border-color: rgba(255, 255, 255, .28); box-shadow: none; } .btn-ghost-dark:hover { border-color: var(--on-ink); color: var(--on-ink); background: rgba(255, 255, 255, .08); } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: var(--ink-2); color: #fff; transform: translateY(-1px); } .btn:active { transform: translateY(1px); } .btn-arrow .ngda-icon { width: 18px; height: 18px; transition: transform .25s var(--ease); } .btn-arrow:hover .ngda-icon { transform: translateX(4px); } /* ---------- Header ---------- */ .site-header { display: none; } /* GeneratePress header, replaced */ /* Utility strip above the header; scrolls away, the main bar stays. */ .ngda-topbar { background: var(--ink); color: var(--on-ink-muted); font-size: 13.5px; } .ngda-topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 38px; } .ngda-topbar ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 22px; } .ngda-topbar-facts li { display: inline-flex; align-items: center; gap: 7px; } .ngda-topbar-facts .ngda-icon { width: 15px; height: 15px; color: var(--sun); } .ngda-topbar-links li + li { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .16); } .ngda-topbar a { color: var(--on-ink); font-weight: 600; text-decoration: none; } .ngda-topbar a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .ngda-header { --bar-h: var(--header-h); position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); transition: box-shadow .2s; padding-top: env(safe-area-inset-top, 0px); } .admin-bar .ngda-header { top: 32px; } @media (max-width: 782px) { .admin-bar .ngda-header { top: 0; } } .ngda-header.is-scrolled { box-shadow: 0 10px 24px -20px rgba(11, 27, 63, .5); } .ngda-bar { display: flex; align-items: center; gap: 36px; min-height: var(--bar-h); } .ngda-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; line-height: 1.1; flex: none; } .ngda-brand:hover { color: var(--ink); } .custom-logo-link img { max-height: 44px; width: auto; } /* Desktop nav: full-height links, the active one underlined on the header's bottom edge. */ .ngda-nav { display: flex; align-items: stretch; align-self: stretch; gap: 4px; } .ngda-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; } .ngda-menu a { position: relative; display: flex; align-items: center; height: 100%; padding: 0 12px; color: var(--muted); font-weight: 600; font-size: 15px; text-decoration: none; transition: color .2s; } .ngda-menu a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--sun); transform: scaleX(0); transition: transform .2s var(--ease); } .ngda-menu a:hover { color: var(--ink); } .ngda-menu a:hover::after { transform: scaleX(1); background: var(--line); } .ngda-menu .current-menu-item > a, .ngda-menu .current_page_parent > a, .ngda-menu a[aria-current="page"] { color: var(--ink); } .ngda-menu .current-menu-item > a::after, .ngda-menu .current_page_parent > a::after, .ngda-menu a[aria-current="page"]::after { transform: scaleX(1); background: var(--sun); } .ngda-nav-cta { display: none; } /* Account, cart, order */ .ngda-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; } .ngda-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s; } .ngda-icon-btn:hover { background: var(--bg); color: var(--ink); } .ngda-icon-btn .ngda-icon { width: 21px; height: 21px; } .ngda-cart-count { position: absolute; top: 3px; left: 24px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sun); color: var(--sun-ink); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--surface); } .ngda-cart-count.is-empty { display: none; } .ngda-actions-sep { width: 1px; height: 26px; margin: 0 8px; background: var(--line); } .ngda-header-cta { min-height: 44px; padding: 10px 18px; box-shadow: none; } .ngda-header-cta:hover { box-shadow: none; } .ngda-menu-toggle .ngda-when-open { display: none; } .ngda-menu-open .ngda-menu-toggle .ngda-when-open { display: inline-flex; } .ngda-menu-open .ngda-menu-toggle .ngda-when-closed { display: none; } .ngda-menu-toggle span { display: inline-flex; } /* Labels stay readable to screen readers when hidden on narrower screens. */ @media (max-width: 1240px) { .ngda-act-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ngda-icon-btn { padding: 0; } .ngda-cart-count { left: auto; right: 2px; } } @media (max-width: 1024px) { .ngda-topbar { display: none; } .ngda-bar { gap: 12px; } .ngda-header-cta, .ngda-actions-sep { display: none; } /* Without JS the menu stays visible under the bar. */ html:not(.ngda-js) .ngda-bar { flex-wrap: wrap; } html:not(.ngda-js) .ngda-nav { order: 3; width: 100%; flex-wrap: wrap; padding-bottom: 10px; } .ngda-brand { min-width: 0; } .ngda-js .ngda-nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px max(16px, env(safe-area-inset-left, 0px)) 20px; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(11, 27, 63, .35); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .ngda-js.ngda-menu-open .ngda-nav { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .25s var(--ease); } .ngda-js .ngda-menu { flex-direction: column; gap: 0; } .ngda-js .ngda-menu a { height: auto; padding: 14px 12px; font-size: 17px; color: var(--text); border-bottom: 1px solid var(--line); } .ngda-js .ngda-menu a::after, .ngda-js .ngda-mega-toggle::after { display: none; } .ngda-js .ngda-nav-cta { display: inline-flex; margin-top: 10px; } } @media (min-width: 1025px) { .ngda-menu-toggle { display: none !important; } } @media (max-width: 560px) { :root { --header-h: 64px; } .ngda-brand { gap: 8px; } .ngda-brand svg { width: 32px; height: 32px; } .ngda-brand-name { font-size: 15px; max-width: 9.5em; } /* wraps to two short lines */ .ngda-actions { gap: 0; } } /* ---------- Layout ---------- */ .ngda-landing .site.grid-container { max-width: none; padding: 0; } .ngda-landing .site-content { display: block; padding: 0; } .ngda-landing .site-main.ngda-main { margin: 0; padding: 0; } .wrap { max-width: 1180px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); } .sec { padding-block: clamp(56px, 8vw, 96px); } .sec.tight { padding-block: clamp(40px, 6vw, 64px); } .sec.white { background: var(--surface); border-block: 1px solid var(--line); } .sec.tinted { background: var(--tint); } .head { display: grid; gap: 12px; margin-bottom: 40px; max-width: 720px; } .head h2 { font-size: clamp(28px, 3.8vw, 44px); line-height: 1.08; margin: 0; } .head p { color: var(--muted); font-size: 18px; margin: 0; } .eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); } .eyebrow.on-dark { color: var(--sun); } /* ---------- Hero ---------- */ .hero { background-color: var(--ink); color: var(--on-ink); position: relative; overflow: hidden; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%); } .hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; padding-block: clamp(48px, 7vw, 96px); } .hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); font-size: 13px; font-weight: 600; color: var(--on-ink-muted); } .hero-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 0 rgba(18, 163, 114, .6); } .hero h1 { font-size: clamp(38px, 5.6vw, 68px); line-height: 1.02; font-weight: 700; letter-spacing: -.03em; margin: 0; color: var(--on-ink); } .hero h1 mark { background: none; color: var(--sun); } .hero .lede { margin: 20px 0 0; font-size: clamp(17px, 1.6vw, 19px); color: var(--on-ink-muted); max-width: 54ch; } .hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; } .signup-note { margin: 12px 0 0; font-size: 14px; color: var(--on-ink-muted); } .ticks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; } .ticks li { display: flex; gap: 10px; align-items: flex-start; } .ticks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; } /* 3D dashboard */ .stage { position: relative; } .mock { position: relative; display: grid; gap: 14px; } .panel { position: relative; background: var(--surface); color: var(--text); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6), 0 0 0 1px rgba(11, 27, 63, .06); } .panel .ph { font-family: var(--f-display); font-weight: 700; font-size: 15px; margin: 0; } .panel .sub { font-size: 13px; color: var(--muted); margin: 0; } .p1 { margin-left: 40px; } .p3 { margin-right: 80px; display: flex; justify-content: space-between; align-items: center; padding-block: 14px; } .chip { font-weight: 700; font-size: 14px; } .order-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; } .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill.live { background: var(--leaf-soft); color: #0b7a55; } .pill.work { background: #e8eefc; color: #2c4fb8; } .track { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .track li { font-size: 12px; color: var(--text); font-weight: 600; display: grid; gap: 6px; } .track li::before { content: ""; height: 5px; border-radius: 3px; background: var(--leaf); } .report { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; font-size: 14px; margin: 0; font-variant-numeric: tabular-nums; } .report dt { color: var(--muted); } .report dd { margin: 0; font-weight: 700; text-align: right; } .spark { display: block; width: 100%; height: 44px; margin-top: 12px; } @media (max-width: 960px) { .hero .wrap { grid-template-columns: 1fr; gap: 44px; } .stage { max-width: 520px; } } @media (max-width: 560px) { .p1 { margin-left: 16px; } .p3 { margin-right: 24px; } .o1 { width: 64px; height: 64px; right: -6px; } .hero-ctas .btn { flex: 1 1 100%; } } /* ---------- Service cards ---------- */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .svc { position: relative; overflow: hidden; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; } .svc:hover { color: var(--text); transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(11, 27, 63, .45); } .svc:hover::before { opacity: 1; } .svc-title { font-size: 20px; margin: 0; } .svc-text { color: var(--muted); font-size: 15px; margin: 0; } .svc .go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent-text); } .svc .go .ngda-icon { width: 18px; height: 18px; transition: transform .25s var(--ease); } .svc:hover .go .ngda-icon { transform: translateX(5px); } .svc.c-blue { border-top-color: var(--c-blue); } .svc.c-green { border-top-color: var(--c-green); } .svc.c-purple { border-top-color: var(--c-purple); } .svc.c-orange { border-top-color: var(--c-orange); } .svc.feature { grid-column: span 2; flex-direction: row; align-items: center; gap: 28px; background: var(--ink); color: var(--on-ink); border-color: var(--ink); } .svc.feature:hover { color: var(--on-ink); } .svc.feature .svc-text { color: var(--on-ink-muted); } .svc.feature .go { color: var(--sun); } .svc-main { display: flex; flex-direction: column; gap: 12px; flex: 1.3; } .tier-peek { flex: 1; display: grid; gap: 8px; } .tier-peek span { display: flex; justify-content: space-between; background: var(--ink-2); border-radius: 10px; padding: 10px 14px; font-size: 14px; transition: transform .3s var(--ease); } .tier-peek span.hot { background: var(--ink-3); box-shadow: inset 0 0 0 1.5px var(--sun); } .tier-peek i { font-style: normal; font-weight: 800; color: var(--sun); } .svc.feature:hover .tier-peek span:nth-child(1) { transform: translateX(-4px); } .svc.feature:hover .tier-peek span:nth-child(3) { transform: translateX(4px); } @media (max-width: 960px) { .svc-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .svc-grid { grid-template-columns: 1fr; } .svc.feature { grid-column: span 1; flex-direction: column; align-items: stretch; } } /* ---------- Tier cards ---------- */ .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; } .tier { position: relative; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 12px; transition: transform .3s var(--ease), box-shadow .3s; } .tier:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(11, 27, 63, .45); } .tier.popular { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--sun), #ffb27f, var(--ink)) border-box; border-width: 2px; } .tier .flag { position: absolute; top: -13px; left: 24px; background: var(--sun); color: var(--sun-ink); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; } .tier .dr { font-family: var(--f-display); font-weight: 800; font-size: 26px; } .tier .traffic { color: var(--muted); font-size: 14px; } .tier .price { font-family: var(--f-display); font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: auto; } .tier .price .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: var(--text); } .tier .price .per { font-family: var(--f-body); font-size: 14px; font-weight: 500; color: var(--muted); } .more-tiers { display: flex; justify-content: center; margin: 24px 0 0; } .ngda-admin-note { background: #fff1d6; color: #5e3a00; padding: 12px 16px; border-radius: 10px; } @media (max-width: 900px) { .tiers { grid-template-columns: 1fr; max-width: 480px; } } /* ---------- Websites band ---------- */ .band { position: relative; overflow: hidden; background: var(--ink); color: var(--on-ink); border-radius: 24px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; isolation: isolate; } .band h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; margin: 8px 0 0; color: var(--on-ink); } .band p { color: var(--on-ink-muted); margin: 12px 0 0; font-size: 17px; } .band .row { margin-top: 24px; } .band ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .band li { background: var(--ink-2); border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px; padding: 14px 16px; display: grid; gap: 2px; transition: transform .3s var(--ease); } .band li:hover { transform: translateX(6px); } .band li b { font-family: var(--f-display); font-size: 15px; } .band li span { font-size: 14px; color: var(--on-ink-muted); } @media (max-width: 860px) { .band { grid-template-columns: 1fr; } } /* ---------- Final call to action ---------- */ .cta { position: relative; overflow: hidden; background: var(--sun); } .cta::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 18px); pointer-events: none; } .cta .wrap { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 52px; } .cta h2 { font-size: clamp(26px, 3.4vw, 38px); color: var(--sun-ink); margin: 0; } .cta p { color: var(--sun-ink); opacity: .85; margin: 6px 0 0; } /* ---------- Footer ---------- */ .site-footer { background: none; padding: 0; } /* GeneratePress's wrapper; our footer renders inside it */ .ngda-footer { background: var(--ink); color: var(--on-ink-muted); font-size: 15px; position: relative; overflow: hidden; } .ngda-foot-top { position: relative; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-block: 64px 48px; } .ngda-footer .ngda-brand { color: var(--on-ink); } .ngda-footer .ngda-brand svg rect { fill: var(--ink-2); } .ngda-foot-brand p { margin: 16px 0 0; max-width: 40ch; } .ngda-foot-contact { margin-top: 20px; } .ngda-foot-contact .ngda-icon { width: 18px; height: 18px; } .ngda-foot-h { font-family: var(--f-display); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink); margin: 6px 0 16px; } .ngda-foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .ngda-foot-links a { color: var(--on-ink-muted); text-decoration: none; display: inline-block; padding: 6px 0; transition: color .2s, transform .2s var(--ease); } .ngda-foot-links a:hover { color: var(--on-ink); transform: translateX(3px); } .ngda-foot-bottom { position: relative; border-top: 1px solid rgba(255, 255, 255, .08); } .ngda-foot-bottom .wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 18px calc(18px + env(safe-area-inset-bottom, 0px)); font-size: 14px; } .ngda-foot-bottom p { margin: 0; } .ngda-foot-bottom .ngda-foot-links { display: flex; gap: 20px; } .ngda-to-top { margin-left: auto; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ink-2); color: var(--on-ink); transition: background-color .2s, transform .2s var(--ease); } .ngda-to-top:hover { background: var(--sun); color: var(--sun-ink); transform: translateY(-2px); } @media (max-width: 900px) { .ngda-foot-top { grid-template-columns: 1fr 1fr; } .ngda-foot-brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .ngda-foot-top { grid-template-columns: 1fr; gap: 28px; padding-block: 48px 32px; } .ngda-foot-bottom .wrap { gap: 12px; } } /* ---------- Motion (only with html.ngda-motion) ---------- */ /* Slide only, never hidden: content stays readable for crawlers, screenshots and slow devices. */ .ngda-motion [data-reveal] { translate: 0 28px; scale: .985; transition: translate .8s var(--ease) var(--d, 0ms), scale .8s var(--ease) var(--d, 0ms); } .ngda-motion [data-reveal].is-in { translate: 0 0; scale: 1; } /* The hero text is the page's largest content (LCP): it never starts hidden. Only the decorative stage animates in. */ .ngda-motion .stage { animation: ngda-slide 1s var(--ease) .1s backwards; } .ngda-motion .p1 { animation: ngda-float-a 7s ease-in-out infinite; } .ngda-motion .p3 { animation: ngda-float-b 6s ease-in-out infinite; } .ngda-motion .hero-kicker .dot { animation: ngda-pulse 2s ease-out infinite; } .ngda-motion .track li::before { transform-origin: left; animation: ngda-fill 6s var(--ease) infinite; } .ngda-motion .track li:nth-child(2)::before { animation-delay: .5s; } .ngda-motion .track li:nth-child(3)::before { animation-delay: 1s; } .ngda-motion .track li:nth-child(4)::before { animation-delay: 1.5s; } .ngda-motion .spark path { stroke-dasharray: 260; animation: ngda-draw 6s var(--ease) infinite; } @keyframes ngda-slide { from { translate: 0 30px; } to { translate: 0 0; } } @keyframes ngda-float-a { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } @keyframes ngda-float-b { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } } @keyframes ngda-pulse { 0% { box-shadow: 0 0 0 0 rgba(18, 163, 114, .6); } 100% { box-shadow: 0 0 0 10px rgba(18, 163, 114, 0); } } @keyframes ngda-fill { 0% { transform: scaleX(0); } 25%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: .35; } } @keyframes ngda-draw { 0% { stroke-dashoffset: 260; } 40%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: .4; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .mock { transform: none; } } /* ---------- WooCommerce ---------- */ .woocommerce .price, .woocommerce-Price-amount { font-variant-numeric: tabular-nums; } .woocommerce ul.products li.product { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; transition: transform .3s var(--ease), box-shadow .3s; } .woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -24px rgba(11, 27, 63, .45); } .woocommerce ul.products li.product .price, .woocommerce div.product p.price { color: var(--text); font-weight: 800; } .woocommerce span.onsale { background: var(--sun); color: var(--sun-ink); } .ngda-masked-domain { font-family: var(--f-display); font-weight: 700; color: var(--muted); margin: 0 0 8px; } .ngda-gp-fields { display: grid; gap: 12px; margin: 0 0 18px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .ngda-gp-fields .form-row { display: grid; gap: 4px; margin: 0; } .ngda-gp-fields label { font-weight: 600; font-size: 14px; } .ngda-gp-fields input, .ngda-gp-fields select, .ngda-gp-fields textarea, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { width: 100%; min-height: 46px; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); color: var(--text); font-size: 16px; } .ngda-gp-fields input:focus, .ngda-gp-fields select:focus, .ngda-gp-fields textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); } .ngda-order-type { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; } .ngda-order-type legend { padding: 0; margin: 0 0 6px; font-weight: 600; font-size: 14px; } .ngda-order-type label { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); font-weight: 400; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .ngda-order-type label:hover { border-color: var(--muted); } .ngda-order-type label:has(input:checked) { border-color: var(--ink); background: var(--bg); } .ngda-gp-fields .ngda-order-type input[type="radio"] { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--ink); } .ngda-order-type span { font-size: 14px; color: var(--muted); line-height: 1.4; } .ngda-order-type span b { display: block; color: var(--text); font-size: 15px; } .ngda-order-type em { font-style: normal; font-weight: 700; color: var(--text); white-space: nowrap; } .woocommerce-message, .woocommerce-info { border-top-color: var(--leaf); } .woocommerce-error { border-top-color: #c62828; } /* ===================================================================== Homepage extras and inner pages: included panel, reviews, carousel, page header ===================================================================== */ .screen-reader-text:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .muted { color: var(--muted); } .small { font-size: 14px; } .inc-icon { flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; } .inc-icon .ngda-icon { width: 24px; height: 24px; } .inc-icon.c-orange { background: #ffeee4; color: var(--c-orange); } .inc-icon.c-purple { background: #f0e9ff; color: var(--c-purple); } .inc-icon.c-green { background: #e1f6ee; color: var(--c-green); } .inc-icon.c-blue { background: #e6eeff; color: var(--c-blue); } /* ---------- Included panel, overlapping the hero ---------- */ .included { position: relative; z-index: 2; margin-top: -44px; padding-bottom: 8px; } .included-panel { list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 30px 60px -36px rgba(11, 27, 63, .45); } .included-panel li { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; transition: background-color .25s; } .included-panel li:hover { background: var(--bg); } .included-panel .inc-icon { transition: transform .3s var(--ease); } .included-panel b { display: block; font-family: var(--f-display); font-size: 16px; line-height: 1.3; margin-bottom: 2px; } .included-panel li > span:last-child > span { font-size: 14px; color: var(--muted); line-height: 1.45; } .hero .wrap { padding-bottom: clamp(88px, 10vw, 128px); } @media (max-width: 1024px) { .included-panel { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .included { margin-top: -32px; } .included-panel { grid-template-columns: 1fr; padding: 6px; } .included-panel li { padding: 12px; } } /* ---------- Reviews ---------- */ .head-center { text-align: center; margin-inline: auto; justify-items: center; } .reviews { background: var(--surface); border-block: 1px solid var(--line); } .review-score { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-weight: 600; } .stars { display: inline-flex; gap: 2px; } .stars .ngda-icon { width: 18px; height: 18px; } .stars .on { color: #f5a524; } .stars .on .ngda-icon { fill: currentColor; } .stars .off { color: var(--line); } .review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 370px)); justify-content: center; gap: 18px; } .review { position: relative; overflow: hidden; margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 14px; transition: transform .3s var(--ease), box-shadow .3s; } .review:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(11, 27, 63, .45); } .review:hover::before { opacity: 1; } .review-quote { position: absolute; top: 18px; right: 20px; color: var(--tint); } .review-quote .ngda-icon { width: 44px; height: 44px; fill: currentColor; stroke: none; } .review blockquote { margin: 0; padding: 0; border: 0; font-size: 16px; color: var(--text); font-style: normal; } .review blockquote p { margin: 0 0 8px; } .review figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); } .review figcaption > span:nth-child(2) { display: grid; line-height: 1.3; } .review figcaption b { font-family: var(--f-display); font-size: 15px; } .review figcaption > span:nth-child(2) span { font-size: 13px; color: var(--muted); } .avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--sun); font-family: var(--f-display); font-weight: 800; } .review-source { margin-left: auto; font-size: 13px; font-weight: 700; } @media (max-width: 960px) { .review-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .review-grid { grid-template-columns: 1fr; } } /* ---------- Blog carousel ---------- */ .learn-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; } .learn-head .head { margin: 0; } .learn-actions { display: flex; gap: 10px; align-items: center; } .round-btn { display: inline-grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text); box-shadow: 0 10px 24px -14px rgba(11, 27, 63, .45); transition: transform .2s var(--ease), background-color .2s, color .2s; cursor: pointer; } .round-btn:hover:not(:disabled) { background: var(--ink); color: var(--on-ink); transform: translateY(-2px); } .round-btn:disabled { opacity: .4; cursor: default; } .carousel { list-style: none; margin: 0 -20px; padding: 8px 20px 24px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior-x: contain; } .carousel:focus-visible { outline-offset: -2px; } @media (max-width: 960px) { .carousel { grid-auto-columns: calc((100% - 20px) / 2); } } @media (max-width: 640px) { .carousel { grid-auto-columns: 86%; } .round-btn { width: 46px; height: 46px; } } /* ---------- Inner page header ---------- */ .subhero { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: var(--on-ink); } .subhero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); } .subhero .wrap { padding-block: clamp(40px, 6vw, 72px); } .subhero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -.025em; margin: 10px 0 0; color: var(--on-ink); max-width: 18ch; } .subhero-lede { margin: 16px 0 0; font-size: clamp(17px, 1.6vw, 19px); color: var(--on-ink-muted); max-width: 60ch; } .subhero .eyebrow { margin: 18px 0 0; } /* ---------- Breadcrumbs ---------- */ .ngda-crumbs { font-size: 14px; } .ngda-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .ngda-crumbs li { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); } .ngda-crumbs li + li::before { content: "/"; opacity: .5; } .ngda-crumbs a { color: inherit; text-decoration: none; } .ngda-crumbs a:hover { color: var(--accent-text); text-decoration: underline; } .subhero .ngda-crumbs li, .subhero .ngda-crumbs a { color: var(--on-ink-muted); } .subhero .ngda-crumbs a:hover { color: var(--on-ink); } .subhero .ngda-crumbs [aria-current] { color: var(--on-ink); } .site-main > .ngda-crumbs, .inside-article .ngda-crumbs { margin-bottom: 16px; } /* ---------- Shared inner-page blocks ---------- */ .pick-own { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--surface); border: 1.5px dashed #9fb0cc; border-radius: var(--radius); padding: 24px 28px; margin-top: 24px; } .pick-own h3 { font-size: 20px; margin: 0; } .pick-own p { margin: 6px 0 0; color: var(--muted); } .split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; } .split .head { margin: 0; } .ticks-grid { grid-template-columns: 1fr 1fr; gap: 14px 24px; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 560px) { .ticks-grid { grid-template-columns: 1fr; } } .prose { max-width: 72ch; font-size: 18px; } .prose > * + * { margin-top: 1em; } .prose h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 1.6em; } .prose h3 { font-size: 21px; margin-top: 1.4em; } .prose a { text-decoration-thickness: 1px; text-underline-offset: 3px; } .small-prose { font-size: 15px; margin-top: 18px; } /* Jump links */ .jump { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: var(--header-h); z-index: 20; } .jump .wrap { display: flex; gap: 8px; overflow-x: auto; padding-block: 12px; scrollbar-width: none; } .jump a { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; font-size: 14px; color: var(--text); text-decoration: none; transition: background-color .2s, border-color .2s; } .jump a::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: currentColor; vertical-align: middle; } .jump a.c-green::before { background: var(--c-green); } .jump a.c-purple::before { background: var(--c-purple); } .jump a.c-blue::before { background: var(--c-blue); } .jump a:hover { background: var(--tint); } .admin-bar .jump { top: calc(var(--header-h) + 32px); } /* Packages */ .packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .package { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: transform .3s var(--ease), box-shadow .3s; } .package:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(11, 27, 63, .45); } .group.c-green .package { border-top-color: var(--c-green); } .group.c-purple .package { border-top-color: var(--c-purple); } .group.c-blue .package { border-top-color: var(--c-blue); } .package h3 { font-size: 20px; margin: 0; } .package p { margin: 0; color: var(--muted); font-size: 15px; } .package-foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .package-foot .price { font-family: var(--f-display); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; } @media (max-width: 960px) { .packages { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .packages { grid-template-columns: 1fr; } } /* Two-up cards (websites) */ .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; } .card-lg { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 4vw, 36px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .card-lg h2 { font-size: clamp(24px, 3vw, 32px); margin: 0; line-height: 1.15; } .card-lg p { margin: 0; } .card-lg.dark { background: var(--ink); color: var(--on-ink); border-color: var(--ink); position: relative; overflow: hidden; isolation: isolate; } .card-lg.dark p { color: var(--on-ink-muted); } .card-lg .btn { margin-top: auto; } @media (max-width: 860px) { .two-up { grid-template-columns: 1fr; } } .estimator { width: 100%; display: grid; gap: 6px; } .estimator label { font-weight: 600; font-size: 14px; margin-top: 8px; } .estimator input, .estimator select, .contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-height: 48px; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); color: var(--text); font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s; } .estimator input:focus, .estimator select:focus, .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); } .estimate { margin-top: 14px; display: grid; gap: 2px; background: var(--bg); border-radius: 14px; padding: 16px 18px; } .estimate span { font-size: 13px; color: var(--muted); font-weight: 600; } .estimate b { font-family: var(--f-display); font-size: clamp(24px, 3vw, 30px); font-weight: 800; font-variant-numeric: tabular-nums; } /* Timeline */ .timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: tl; position: relative; } .timeline::before { content: ""; position: absolute; left: 20px; right: 20px; top: 20px; height: 2px; background: repeating-linear-gradient(90deg, var(--sun) 0 6px, transparent 6px 12px); } .timeline li { position: relative; counter-increment: tl; display: grid; gap: 6px; padding-top: 56px; } .timeline li::before { content: counter(tl); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: var(--sun); font-family: var(--f-display); font-weight: 800; display: grid; place-items: center; } .timeline b { font-family: var(--f-display); font-size: 16px; } .timeline span { color: var(--muted); font-size: 14px; } @media (max-width: 900px) { .timeline { grid-template-columns: 1fr; gap: 0; } .timeline::before { left: 19px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--sun) 0 6px, transparent 6px 12px); } .timeline li { padding: 6px 0 22px 60px; } } /* Values (about) */ .values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .value { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 10px; align-content: start; transition: transform .3s var(--ease); } .value:hover { transform: translateY(-4px); } .value h3 { font-size: 18px; margin: 4px 0 0; } .value p { margin: 0; color: var(--muted); font-size: 15px; } @media (max-width: 1024px) { .values { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .values { grid-template-columns: 1fr; } } /* Contact */ .contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; } .contact-form { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 4vw, 36px); display: grid; gap: 16px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { margin: 0; display: grid; gap: 6px; } .field label { font-weight: 600; font-size: 14px; } .contact-form textarea { min-height: 150px; resize: vertical; } .contact-form .btn { justify-self: start; } .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-notice { margin: 0; padding: 14px 16px; border-radius: 12px; font-weight: 600; } .form-notice.ok { background: var(--leaf-soft); color: #0b5e43; } .form-notice.error { background: #fdecec; color: #8f1d1d; } .mini-steps { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 10px; color: var(--on-ink-muted); } .contact-side .card-lg h2 { font-size: 22px; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } } /* ---------- Blog index, single posts, regular pages (GeneratePress markup) ---------- */ body:not(.ngda-landing) .site-content { padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(40px, 6vw, 72px); } .separate-containers .inside-article, .separate-containers .page-header { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 4vw, 44px); } .entry-title, .page-title { font-family: var(--f-display); letter-spacing: -.025em; line-height: 1.15; } .single .entry-title, .page .entry-title { font-size: clamp(30px, 4vw, 46px); } .blog .entry-title, .archive .entry-title { font-size: clamp(22px, 2.4vw, 28px); } .entry-title a { color: var(--text); text-decoration: none; } .entry-title a:hover { color: var(--accent-text); } .entry-meta { font-size: 14px; color: var(--muted); } .entry-meta a { color: var(--muted); } .entry-content { font-size: 18px; } .entry-content > * + * { margin-top: 1em; } .entry-content h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 1.6em; } .entry-content h3 { font-size: 21px; margin-top: 1.4em; } .entry-content blockquote { border-left: 4px solid var(--sun); background: var(--bg); padding: 16px 20px; border-radius: 0 12px 12px 0; font-style: normal; } .entry-content table { border-collapse: collapse; width: 100%; font-size: 16px; } .entry-content th, .entry-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; } .entry-content th { background: var(--bg); } .blog .site-main > article, .archive .site-main > article { transition: transform .3s var(--ease); } .blog .site-main > article:hover, .archive .site-main > article:hover { transform: translateY(-3px); } .read-more, .more-link { font-weight: 700; color: var(--accent-text); } .paging-navigation .nav-links > * { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); margin: 2px; padding: 0 10px; text-decoration: none; } .paging-navigation .current { background: var(--ink); color: #fff; border-color: var(--ink); } .comments-area { border-radius: 20px; } .page-header .page-title { font-size: clamp(28px, 4vw, 40px); } .widget-area .widget { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; } /* Richer motion for the new parts (only with html.ngda-motion) */ .ngda-motion .included-panel li:nth-child(2) { --d: 80ms; } .ngda-motion .included-panel li:nth-child(3) { --d: 160ms; } .ngda-motion .included-panel li:nth-child(4) { --d: 240ms; } /* GeneratePress drops side padding on small screens; keep a gutter on regular pages and posts. */ @media (max-width: 768px) { body:not(.ngda-landing) .site-content { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } .separate-containers .inside-article, .separate-containers .page-header { border-radius: 16px; } } /* ===================================================================== Services mega menu and illustrated service cards ===================================================================== */ :root { --c-pink: #db2777; } /* ---------- Scroll progress under the header ---------- */ /* ---------- Mega menu trigger ---------- */ .ngda-mega-item { display: flex; } .ngda-mega-toggle { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px; border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: color .2s; } .ngda-mega-toggle::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--sun); transform: scaleX(0); transition: transform .2s var(--ease); } .ngda-mega-toggle:hover, .ngda-mega-toggle[aria-expanded="true"] { color: var(--ink); background: transparent; } .ngda-mega-toggle[aria-expanded="true"]::after { transform: scaleX(1); } .ngda-mega-toggle .chev { transition: transform .3s var(--ease); } .ngda-mega-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); } /* ---------- Mega menu panel (desktop) ---------- */ .ngda-mega { position: absolute; left: 50%; top: calc(100% + 8px); z-index: 60; width: min(1140px, calc(100vw - 32px)); padding: 28px 28px 24px; background: var(--ink); color: var(--on-ink); border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 40px 80px -30px rgba(11, 27, 63, .65); opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .22s, transform .3s var(--ease), visibility 0s .3s; isolation: isolate; overflow: hidden; } .ngda-mega-item.is-open .ngda-mega, html:not(.ngda-js) .ngda-mega-item:hover .ngda-mega, html:not(.ngda-js) .ngda-mega-item:focus-within .ngda-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .22s, transform .3s var(--ease); } .ngda-mega-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; } .ngda-mega-col { --cc: var(--sun); min-width: 0; } .ngda-mega-col.c-orange { --cc: #ff8a50; } .ngda-mega-col.c-green { --cc: #34d399; } .ngda-mega-col.c-purple { --cc: #a78bfa; } .ngda-mega-col.c-blue { --cc: #60a5fa; } .ngda-mega-col.c-pink { --cc: #f472b6; } .ngda-mega-title { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 16px; text-decoration: none; position: relative; } .ngda-mega-title::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 28px; background: var(--cc); transition: width .35s var(--ease); } .ngda-mega-title:hover { color: #fff; } .ngda-mega-col:hover .ngda-mega-title::after { width: 100%; } .ngda-mega-title .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--cc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cc) 20%, transparent); } .ngda-mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .ngda-mega-col li a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 10px; margin-inline: -10px; border-radius: 10px; color: var(--on-ink-muted); font-size: 14.5px; text-decoration: none; transition: color .2s, background-color .2s, transform .25s var(--ease); } .ngda-mega-col li a:hover, .ngda-mega-col li a:focus-visible { color: #fff; background: rgba(255, 255, 255, .06); transform: translateX(4px); } .ngda-mega-col li a em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--cc); background: rgba(255, 255, 255, .06); border-radius: 6px; padding: 2px 7px; white-space: nowrap; } .ngda-mega-promo { margin-top: 24px; display: grid; grid-template-columns: auto 1fr minmax(120px, 260px) auto; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px); background-size: 16px 16px; } .promo-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--sun); color: var(--sun-ink); } .promo-title { margin: 0; font-family: var(--f-display); font-weight: 700; color: #fff; } .promo-text { margin: 2px 0 0; font-size: 14px; color: var(--on-ink-muted); } .promo-path { width: 100%; height: 40px; color: rgba(255, 255, 255, .45); } .ngda-motion .ngda-mega-item.is-open .ngda-mega-col { animation: ngda-col-in .45s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 60ms); } .ngda-motion .ngda-mega-item.is-open .promo-path path:first-child { animation: ngda-dash 1.4s linear infinite; } @keyframes ngda-col-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } } @keyframes ngda-dash { to { stroke-dashoffset: -26; } } @media (max-width: 1200px) and (min-width: 1025px) { .ngda-mega-cols { gap: 18px; } .ngda-mega-col li a { font-size: 14px; } } /* ---------- Mega menu inside the mobile menu: accordion ---------- */ @media (max-width: 1024px) { .ngda-js .ngda-mega-item { flex-direction: column; border-bottom: 1px solid var(--line); } .ngda-js .ngda-mega-toggle { justify-content: space-between; width: 100%; height: auto; padding: 14px 12px; font-size: 17px; color: var(--text); border-radius: 0; background: transparent; } .ngda-js .ngda-mega { position: static; width: auto; transform: none; opacity: 1; visibility: visible; display: none; padding: 16px; margin: 0 0 12px; border-radius: 16px; transition: none; box-shadow: none; } .ngda-js .ngda-mega-item.is-open .ngda-mega { display: block; transform: none; } .ngda-mega-cols { grid-template-columns: 1fr 1fr; gap: 20px; } .ngda-mega-promo { grid-template-columns: auto 1fr; } .promo-path { display: none; } .ngda-mega-promo .promo-actions { grid-column: 1 / -1; } } @media (max-width: 560px) { .ngda-mega-cols { grid-template-columns: 1fr; gap: 14px; } .ngda-mega-col ul { gap: 0; } } /* ---------- Illustrated service cards ---------- */ .explore-row { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; height: 440px; } .explore-card { --cc: #ff6b2c; --cc-deep: #7a2a0c; --rx: 0deg; --ry: 0deg; position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: 26px; border-radius: 22px; color: #fff; background: radial-gradient(260px circle at 80% 88%, color-mix(in srgb, var(--cc) 55%, transparent), transparent 70%), linear-gradient(165deg, var(--cc-deep), var(--ink) 78%); transition: flex-grow .6s var(--ease), transform .25s, box-shadow .3s; box-shadow: 0 24px 50px -32px rgba(11, 27, 63, .7); } .explore-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); } .explore-card.c-orange { --cc: #ff6b2c; --cc-deep: #6b2a10; } .explore-card.c-green { --cc: #12a372; --cc-deep: #0b4a3a; } .explore-card.c-purple { --cc: #8b5cf6; --cc-deep: #3b2275; } .explore-card.c-blue { --cc: #3b82f6; --cc-deep: #163a7a; } .explore-card.c-pink { --cc: #ec4899; --cc-deep: #6b1d48; } .explore-row:hover .explore-card, .explore-row:focus-within .explore-card { flex-grow: .8; } .explore-row .explore-card:hover, .explore-row .explore-card:focus-within { flex-grow: 1.7; } .explore-kicker { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .78); } .explore-card h3 { margin: 6px 0 0; font-size: clamp(19px, 1.65vw, 26px); line-height: 1.12; color: #fff; overflow-wrap: normal; word-break: keep-all; hyphens: manual; } .explore-card h3 a { color: inherit; text-decoration: none; } .explore-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; } .explore-card:focus-within { outline: 3px solid var(--c-blue); outline-offset: 3px; } .explore-card h3 a:focus-visible { outline: none; } .explore-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: rgba(255, 255, 255, .88); } .explore-foot > span:first-child { min-width: 0; } .explore-go { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); transition: background-color .3s, transform .4s var(--ease), color .3s; } .explore-go .ngda-icon { width: 20px; height: 20px; } .explore-card:hover .explore-go { background: var(--sun); color: var(--sun-ink); border-color: var(--sun); } .svc-art { position: absolute; z-index: -1; right: -24px; bottom: 40px; width: 230px; height: 230px; color: rgba(255, 255, 255, .5); transition: transform .7s var(--ease), color .4s; } .svc-art .fill { fill: rgba(255, 255, 255, .07); } .svc-art .accent { stroke: var(--cc); } .svc-art .accent-fill { fill: var(--cc); stroke: none; } @media (max-width: 1024px) { .explore-row { display: grid; grid-template-columns: 1fr 1fr; height: auto; } .explore-card { min-height: 280px; } .explore-card:first-child { grid-column: 1 / -1; } } @media (max-width: 600px) { .explore-row { grid-template-columns: 1fr; } .explore-card { min-height: 230px; } .svc-art { width: 170px; height: 170px; bottom: 30px; right: -16px; } } /* ===================================================================== Shared components: section labels, icon tiles, facts, steps, pricing, FAQ, cards Rules: sections alternate light / white / navy; every card has a coloured icon tile; one card radius (--r-card); section labels are pills. ===================================================================== */ :root { --r-card: 18px; --shadow-card: 0 24px 44px -30px rgba(11, 27, 63, .45); } /* Section label pill (light and dark) */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; justify-self: start; width: max-content; max-width: 100%; padding: 6px 12px 6px 10px; border-radius: 999px; background: #fff1e9; color: var(--accent-text); font-size: 12px; letter-spacing: .12em; } .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); } .eyebrow.on-dark { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #ffb48f; } .head-center .eyebrow { justify-self: center; } /* Shared coloured icon tile */ .fact-icon { flex: none; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--cc, #ff6b2c) 16%, transparent); color: var(--cc, #ff6b2c); transition: transform .35s var(--ease); } .fact-icon .ngda-icon { width: 23px; height: 23px; } .c-orange { --cc: #ea580c; } .c-green { --cc: #0f9f6e; } .c-purple { --cc: #7c3aed; } .c-blue { --cc: #2563eb; } .c-pink { --cc: #db2777; } /* ---------- Six facts: navy feature band ---------- */ .facts-band { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: var(--on-ink); } .facts-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 20% 40%, #000 15%, transparent 70%); mask-image: radial-gradient(ellipse at 20% 40%, #000 15%, transparent 70%); } .facts-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; } .facts-intro { display: grid; gap: 16px; align-content: start; } .facts-intro h2 { margin: 0; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.06; color: #fff; } .facts-intro p { margin: 0; color: var(--on-ink-muted); font-size: 18px; max-width: 40ch; } .facts-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .facts-grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fact { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 4px; padding: 20px; border-radius: var(--r-card); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: background-color .3s, border-color .3s, transform .3s var(--ease); } .fact:hover { background: rgba(255, 255, 255, .08); border-color: color-mix(in srgb, var(--cc) 55%, transparent); transform: translateY(-3px); } .fact .fact-icon { grid-row: 1 / span 2; background: color-mix(in srgb, var(--cc) 22%, transparent); color: color-mix(in srgb, var(--cc) 55%, #fff); } .fact dt { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--cc) 45%, #fff); align-self: end; } .fact dd { margin: 0; font-weight: 600; color: #fff; line-height: 1.45; } @media (max-width: 960px) { .facts-layout { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 600px) { .facts-grid { grid-template-columns: 1fr; } } /* ---------- Steps with icons ---------- */ .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; } .step { position: relative; overflow: hidden; counter-increment: step; display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: transform .3s var(--ease), border-color .3s; } .step::before { content: counter(step, decimal-leading-zero); position: absolute; right: 18px; top: 8px; font-family: var(--f-display); font-weight: 800; font-size: 64px; line-height: 1; color: color-mix(in srgb, var(--cc) 12%, transparent); } .step:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--cc) 45%, var(--line)); } .step-top { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .step:not(:last-child)::after { content: ""; position: absolute; top: 49px; right: -21px; width: 22px; height: 2px; background: repeating-linear-gradient(90deg, var(--sun) 0 4px, transparent 4px 8px); } .steps .step { overflow: visible; } .step h3 { margin: 0; font-size: 20px; } .step p { margin: 0; color: var(--muted); font-size: 15px; } @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } .step:not(:last-child)::after { display: none; } } /* ---------- Pricing cards ---------- */ .tier { border-radius: var(--r-card); box-shadow: var(--shadow-card); gap: 14px; } .tier-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .meter { display: inline-flex; gap: 3px; align-items: flex-end; height: 22px; } .meter i { width: 6px; border-radius: 2px; background: var(--line); } .meter i:nth-child(1) { height: 7px; } .meter i:nth-child(2) { height: 10px; } .meter i:nth-child(3) { height: 13px; } .meter i:nth-child(4) { height: 16px; } .meter i:nth-child(5) { height: 19px; } .meter i:nth-child(6) { height: 22px; } .meter i.on { background: linear-gradient(180deg, #ffb27f, var(--sun)); } .tier .price { margin-top: 4px; } .tier-incl { list-style: none; margin: 0 0 6px; padding: 14px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 8px; font-size: 14px; color: var(--muted); } .tier-incl li { display: flex; gap: 8px; align-items: center; } .tier-incl li::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; } .tier .btn { margin-top: auto; } .tier.popular { box-shadow: 0 30px 60px -30px rgba(255, 107, 44, .55); } /* ---------- FAQ: navy side card + numbered questions ---------- */ .faq-wrap { display: grid; grid-template-columns: .82fr 1.18fr; gap: 40px; align-items: start; } .faq-side { position: sticky; top: calc(var(--header-h) + 24px); overflow: hidden; isolation: isolate; display: grid; gap: 16px; padding: clamp(24px, 3vw, 34px); border-radius: 22px; background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-card); } .faq-side::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(200deg, #000, transparent 60%); mask-image: linear-gradient(200deg, #000, transparent 60%); } .faq-side h2 { margin: 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.08; color: #fff; } .faq-side > p { margin: 0; color: var(--on-ink-muted); } .faq-ask { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); } .faq-ask .fact-icon { --cc: #ff8a50; background: rgba(255, 107, 44, .18); color: #ffb48f; } .faq-ask b { display: block; font-family: var(--f-display); color: #fff; } .faq-ask span { font-size: 14px; color: var(--on-ink-muted); } .faq-side .btn { justify-self: start; } .faq { display: grid; gap: 12px; } .faq details { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color .25s, box-shadow .25s, background-color .25s; } .faq details::before { content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--sun); transform: scaleY(0); transition: transform .3s var(--ease); } .faq details:hover { border-color: #c7d2e4; } .faq details[open] { border-color: transparent; box-shadow: var(--shadow-card), 0 0 0 1.5px var(--ink); } .faq details[open]::before { transform: scaleY(1); } .faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 18px 20px; font-family: var(--f-display); font-weight: 700; font-size: 16.5px; min-height: 44px; } .faq summary::-webkit-details-marker { display: none; } .faq-num { font-size: 13px; font-weight: 800; color: var(--muted); background: var(--bg); border-radius: 8px; padding: 4px 8px; font-variant-numeric: tabular-nums; transition: background-color .25s, color .25s; } .faq details[open] .faq-num { background: var(--sun); color: var(--sun-ink); } .faq summary::after { content: ""; width: 30px; height: 30px; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1b3f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .3s var(--ease), background-color .25s; } .faq details[open] summary::after { transform: rotate(180deg); background-color: var(--sun); } .faq-a { padding: 0 20px 20px 66px; color: var(--muted); } .faq-a p { margin: 0; } @media (max-width: 960px) { .faq-wrap { grid-template-columns: 1fr; gap: 24px; } .faq-side { position: static; } } @media (max-width: 560px) { .faq-a { padding-left: 20px; } .faq summary { gap: 10px; padding: 16px; } } /* ---------- Blog cards with category covers ---------- */ .learn { background: var(--tint); } .carousel { gap: 22px; padding-bottom: 28px; } .post-card { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: transform .35s var(--ease), box-shadow .35s; } .post-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -34px rgba(11, 27, 63, .55); } .post-card:focus-within { outline: 3px solid var(--c-blue); outline-offset: 2px; } .post-cover { position: relative; overflow: hidden; height: 150px; display: flex; align-items: flex-end; justify-content: space-between; padding: 16px; isolation: isolate; background: radial-gradient(220px circle at 85% 20%, color-mix(in srgb, var(--cc) 70%, transparent), transparent 70%), linear-gradient(150deg, color-mix(in srgb, var(--cc) 55%, var(--ink)), var(--ink) 85%); } .post-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); } .cover-icon { position: absolute; right: 18px; top: 50%; translate: 0 -50%; color: rgba(255, 255, 255, .9); transition: transform .5s var(--ease); } .cover-icon .ngda-icon { width: 76px; height: 76px; stroke-width: 1.3; } .cover-time { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: 12.5px; font-weight: 700; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .cover-time .ngda-icon { width: 14px; height: 14px; } .post-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 18px; } .post-cat { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cc); } .post-card h3 { margin: 0; font-size: 19px; line-height: 1.3; } .post-card h3 a { color: var(--text); text-decoration: none; } .post-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .post-card h3 a:focus-visible { outline: none; } .post-card p { margin: 0; color: var(--muted); font-size: 15px; } .post-meta { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; } .post-author { display: flex; align-items: center; gap: 10px; min-width: 0; } .post-author > span:last-child { display: grid; line-height: 1.25; min-width: 0; } .post-author b { font-size: 14px; font-family: var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-author time { font-size: 13px; color: var(--muted); } .avatar.sm { width: 34px; height: 34px; font-size: 14px; background: color-mix(in srgb, var(--cc) 85%, var(--ink)); color: #fff; } .post-go { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--bg); color: var(--text); transition: background-color .3s, color .3s, transform .4s var(--ease); } .post-go .ngda-icon { width: 18px; height: 18px; } .post-card:hover .post-go { background: var(--sun); color: var(--sun-ink); } /* ---------- Reviews and pricing sit on white, so cards get the shared shadow ---------- */ .review { border-radius: var(--r-card); box-shadow: var(--shadow-card); background: var(--surface); } .package, .value, .card-lg, .contact-form, .pick-own { border-radius: var(--r-card); } .ngda-blog-head { display: grid; gap: 12px; margin-bottom: 24px; } .ngda-blog-head .page-title { margin: 0; font-size: clamp(32px, 4.4vw, 50px); } .ngda-blog-head p { margin: 0; color: var(--muted); font-size: 18px; max-width: 60ch; } /* ===================================================================== Content: spacing scale, post and page typography, blog, single post, product page, comment and review forms ===================================================================== */ /* ---------- Spacing ---------- */ .sec { padding-block: clamp(48px, 6vw, 80px); } .sec.tight { padding-block: clamp(36px, 5vw, 56px); } .head { margin-bottom: 32px; } .included-panel li > span:last-child > span { display: block; margin-top: 2px; } .included-panel li:hover { background: transparent; } .included-panel li:hover b { color: var(--accent-text); } /* ---------- Typography for page and post content ---------- */ .prose, .entry-content { font-size: 18px; line-height: 1.75; color: #24304a; max-width: none; overflow-wrap: break-word; } .prose > *, .entry-content > * { margin-top: 0; margin-bottom: 0; } .prose > * + *, .entry-content > * + * { margin-top: 1.15em; } .prose > :first-child, .entry-content > :first-child { margin-top: 0; } .prose h2, .entry-content h2 { position: relative; margin-top: 1.9em; padding-left: 18px; font-size: clamp(24px, 2.6vw, 31px); line-height: 1.2; color: var(--ink); scroll-margin-top: calc(var(--header-h) + 24px); } .prose h2::before, .entry-content h2::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 5px; border-radius: 4px; background: linear-gradient(180deg, var(--sun), #ffb27f); } .prose h2:first-child, .entry-content h2:first-child { margin-top: 0; } .prose h3, .entry-content h3 { margin-top: 1.6em; font-size: clamp(19px, 2vw, 22px); line-height: 1.3; color: var(--ink); } .prose h4, .entry-content h4 { margin-top: 1.4em; font-size: 18px; color: var(--ink); } .prose h2 + *, .prose h3 + *, .prose h4 + *, .entry-content h2 + *, .entry-content h3 + *, .entry-content h4 + * { margin-top: .6em; } .prose strong, .entry-content strong { color: var(--ink); } .prose a, .entry-content a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(194, 65, 12, .35); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-decoration-color .2s; } .prose a:hover, .entry-content a:hover { color: var(--accent-text); text-decoration-color: currentColor; } .prose > ul, .entry-content > ul, .prose li > ul, .entry-content li > ul { list-style: none; padding: 0; } :is(.prose, .entry-content) > ul > li, :is(.prose, .entry-content) li > ul > li { position: relative; padding-left: 30px; } :is(.prose, .entry-content) > ul > li::before, :is(.prose, .entry-content) li > ul > li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(255, 107, 44, .16); } .prose > ol, .entry-content > ol, .prose li > ol, .entry-content li > ol { list-style: none; padding: 0; counter-reset: ngda-ol; } :is(.prose, .entry-content) > ol > li, :is(.prose, .entry-content) li > ol > li { position: relative; padding-left: 42px; counter-increment: ngda-ol; } :is(.prose, .entry-content) > ol > li::before, :is(.prose, .entry-content) li > ol > li::before { content: counter(ngda-ol); position: absolute; left: 0; top: .1em; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--ink); color: #fff; font: 700 14px/1 var(--f-display); } .prose li + li, .entry-content li + li { margin-top: .55em; } .prose li > ul, .prose li > ol, .entry-content li > ul, .entry-content li > ol { margin-top: .55em; } .prose blockquote, .entry-content blockquote { position: relative; margin-inline: 0; padding: 22px 26px 22px 64px; border: 0; border-radius: 16px; background: var(--tint); color: var(--ink); font-size: 19px; font-style: normal; } .prose blockquote::before, .entry-content blockquote::before { content: "\201C"; position: absolute; left: 20px; top: 8px; font: 800 52px/1 var(--f-display); color: var(--sun); } .prose blockquote p, .entry-content blockquote p { margin: 0; } .prose blockquote cite, .entry-content blockquote cite { display: block; margin-top: 10px; font-size: 14px; font-style: normal; color: var(--muted); } .prose code, .entry-content code { padding: 2px 7px; border-radius: 6px; background: var(--tint); color: var(--ink); font-size: .88em; } .prose pre, .entry-content pre { padding: 20px 22px; border-radius: 14px; background: var(--ink); color: var(--on-ink); font-size: 15px; line-height: 1.6; overflow-x: auto; } .prose pre code, .entry-content pre code { padding: 0; background: none; color: inherit; } .prose img, .entry-content img { border-radius: 14px; } .prose figure, .entry-content figure { margin-inline: 0; } .prose figcaption, .entry-content figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; } .prose hr, .entry-content hr { height: 0; margin-block: 2.2em; border: 0; border-top: 2px dashed var(--line); background: none; } .prose table, .entry-content table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 16px; line-height: 1.5; } .prose th, .prose td, .entry-content th, .entry-content td { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .prose th, .entry-content th { background: var(--ink); color: #fff; font-family: var(--f-display); font-size: 15px; } .prose tr:last-child td, .entry-content tr:last-child td { border-bottom: 0; } .prose tbody tr:nth-child(even) td, .entry-content tbody tr:nth-child(even) td { background: var(--bg); } .prose .wp-block-table, .entry-content .wp-block-table { overflow-x: auto; } .prose mark, .entry-content mark { background: #ffe3d4; color: var(--ink); padding: 0 4px; border-radius: 4px; } /* ---------- Page body: content card (regular pages, About, inner pages) ---------- */ .page-body { padding-block: clamp(40px, 5vw, 64px); } .page-card { max-width: 860px; margin-inline: auto; padding: clamp(24px, 4.5vw, 56px); background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-card); } .page-card.wide { max-width: none; } .subhero + .page-body { position: relative; z-index: 1; margin-top: -40px; padding-top: 0; } /* About: navy side panel + story card */ .story { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: start; } .story .page-card { max-width: none; margin: 0; } .story-side { position: sticky; top: calc(var(--header-h) + 24px); overflow: hidden; isolation: isolate; display: grid; gap: 18px; padding: 28px; border-radius: 22px; background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-card); } .story-side-title { margin: 0; font: 700 22px/1.25 var(--f-display); color: #fff; letter-spacing: -.02em; } .story-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .story-facts li { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); } .story-facts .fact-icon { width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--cc) 22%, transparent); color: color-mix(in srgb, var(--cc) 55%, #fff); } .story-facts .fact-icon .ngda-icon { width: 20px; height: 20px; } .story-facts b { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--cc) 45%, #fff); } .story-facts li > span:last-child { font-size: 15px; font-weight: 600; line-height: 1.35; color: #fff; } .story-side .btn { justify-self: start; } @media (max-width: 960px) { .story { grid-template-columns: 1fr; } .story-side { position: static; } } /* ---------- Blog index and archives ---------- */ .blog-hero .wrap { padding-bottom: clamp(36px, 5vw, 56px); } .blog-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 28px; } .chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); color: var(--on-ink); font-size: 14px; font-weight: 700; text-decoration: none; transition: background-color .2s, border-color .2s; } .chips a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cc, var(--sun)); } .chips a span { padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 12px; color: var(--on-ink-muted); } .chips a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; } .chips a[aria-current] { background: var(--sun); border-color: var(--sun); color: var(--sun-ink); } .chips a[aria-current]::before { background: var(--sun-ink); } .chips a[aria-current] span { background: rgba(11, 27, 63, .15); color: var(--sun-ink); } .blog-search { display: flex; align-items: center; width: min(320px, 100%); padding: 4px 4px 4px 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); } .blog-search:focus-within { border-color: var(--sun); } .blog-search input { flex: 1; min-width: 0; padding: 8px 0; border: 0; background: none; color: #fff; font-size: 15px; outline: none; } .blog-search input::placeholder { color: var(--on-ink-muted); } .blog-search button { display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--sun); color: var(--sun-ink); box-shadow: none; cursor: pointer; } .blog-search button:hover { background: var(--sun-hover); transform: none; } .blog-list { padding-top: clamp(32px, 4vw, 48px); } .post-lead, .post-grid { list-style: none; margin: 0; padding: 0; } .post-lead { margin-bottom: 26px; } .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .post-grid .post-card h3 { font-size: 20px; } .post-feature { display: grid; grid-template-columns: 1.05fr 1fr; } .post-feature .post-cover { height: auto; min-height: 320px; } .post-feature .cover-icon .ngda-icon { width: 150px; height: 150px; stroke-width: 1; } .post-feature .cover-icon { right: 50%; translate: 50% -50%; } .post-feature .post-body { padding: clamp(24px, 3vw, 40px); gap: 14px; justify-content: center; } .post-feature .post-card-title { margin: 0; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; } .post-feature .post-card-title a { color: var(--text); text-decoration: none; } .post-feature .post-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .post-feature p { font-size: 17px; } .post-feature .post-meta { margin-top: 10px; } .cover-flag { position: absolute; left: 16px; top: 16px; padding: 5px 12px; border-radius: 999px; background: var(--sun); color: var(--sun-ink); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .pager { margin-top: 40px; } .pager ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .pager .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; text-decoration: none; } .pager a.page-numbers:hover { border-color: var(--ink); } .pager .current { background: var(--ink); border-color: var(--ink); color: #fff; } .empty-state { display: grid; justify-items: center; gap: 12px; max-width: 520px; margin: 0 auto; padding: 48px 28px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-card); } .empty-state h2 { margin: 0; font-size: 26px; } .empty-state p { margin: 0; color: var(--muted); } @media (max-width: 1024px) { .post-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .post-feature { grid-template-columns: 1fr; } .post-feature .post-cover { min-height: 200px; } .post-feature .cover-icon .ngda-icon { width: 100px; height: 100px; } } @media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } .blog-search { width: 100%; } } /* ---------- Single post ---------- */ .post-hero h1 { max-width: 22ch; } .post-hero .wrap { padding-bottom: clamp(72px, 8vw, 104px); } .post-hero a.eyebrow { text-decoration: none; } .post-hero a.eyebrow:hover { color: #fff; } .post-byline { display: flex; align-items: center; gap: 12px; margin-top: 26px; } .avatar { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--sun), #c2410c); color: #fff; font: 800 17px/1 var(--f-display); } .avatar.lg { width: 64px; height: 64px; font-size: 24px; } .post-byline-text { display: grid; gap: 2px; font-size: 14px; color: var(--on-ink-muted); } .post-byline-text b { font-family: var(--f-display); font-size: 15px; color: #fff; } .post-byline-text > span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .dot-sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; } .post-wrap { position: relative; z-index: 1; margin-top: clamp(-72px, -6vw, -48px); padding-top: 0; } .post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; } .post-layout.no-toc { grid-template-columns: minmax(0, 1fr) 300px; } .post-article { min-width: 0; padding: clamp(24px, 4.5vw, 56px); background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-card); } .post-article .prose > p:first-child { font-size: 20px; line-height: 1.65; color: var(--ink); } .post-tags { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .post-tags a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; } .post-tags a:hover { border-color: var(--ink); } .author-box { display: flex; gap: 18px; align-items: flex-start; margin-top: 40px; padding: 24px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); } .author-box p { margin: 0; color: var(--muted); font-size: 15px; } .author-kicker { font-size: 12px !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text) !important; } .author-name { margin: 2px 0 6px !important; font: 700 20px/1.2 var(--f-display); color: var(--ink) !important; } .author-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--accent-text); text-decoration: none; } .author-link .ngda-icon { width: 16px; height: 16px; transition: transform .25s var(--ease); } .author-link:hover .ngda-icon { transform: translateX(3px); } .post-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 18px; } .toc { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card); } .toc-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 700 15px/1.2 var(--f-display); color: var(--ink); } .toc-title .ngda-icon { width: 18px; height: 18px; color: var(--sun); } .toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: 2px; } .toc li { counter-increment: toc; } .toc a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--muted); font-size: 14.5px; font-weight: 600; line-height: 1.35; text-decoration: none; transition: background-color .2s, color .2s; } .toc a::before { content: counter(toc, decimal-leading-zero); flex: none; font: 800 12px/1.6 var(--f-display); color: var(--accent-text); } .toc a:hover { background: var(--bg); color: var(--ink); } .aside-cta { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 10px; padding: 24px; border-radius: 18px; background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow-card); } .aside-cta .fact-icon { background: rgba(255, 107, 44, .18); color: #ffb48f; } .aside-cta-title { margin: 4px 0 0; font: 700 19px/1.25 var(--f-display); color: #fff; } .aside-cta p:not(.aside-cta-title) { margin: 0; font-size: 14.5px; color: var(--on-ink-muted); } .aside-cta .btn { justify-self: start; margin-top: 6px; } .related .head { margin-bottom: 28px; } @media (max-width: 1024px) { .post-layout, .post-layout.no-toc { grid-template-columns: 1fr; } .post-aside { position: static; grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .post-aside { grid-template-columns: 1fr; } .author-box { flex-direction: column; } } /* ---------- Comments and review forms (posts and products) ---------- */ .comments-area { margin-top: 40px; padding: 0; background: none; border: 0; } .comments-title, .comment-reply-title, .woocommerce-Reviews-title, #reviews #comments h2 { margin: 0 0 14px; font: 700 22px/1.25 var(--f-display); color: var(--ink); } .comment-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; } .comment-list .comment-body, .woocommerce #reviews #comments ol.commentlist li .comment-text { padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); } #respond, .comment-respond { margin-top: 8px; padding: clamp(20px, 3vw, 28px); background: var(--bg); border: 1px solid var(--line); border-radius: 18px; } .comment-form, .woocommerce #review_form #respond .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; } .comment-form > p { margin: 0; grid-column: 1 / -1; } .comment-form .comment-form-author, .comment-form .comment-form-email { grid-column: auto; } .comment-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--ink); } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea, .woocommerce #review_form #respond input[type="text"], .woocommerce #review_form #respond input[type="email"], .woocommerce #review_form #respond textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: 16px/1.5 var(--f-body); transition: border-color .2s, box-shadow .2s; } .comment-form textarea, .woocommerce #review_form #respond textarea { min-height: 140px; resize: vertical; } .comment-form input:focus, .comment-form textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .2); } .comment-form .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); } .comment-form .comment-form-cookies-consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--sun); } .comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 500; color: var(--muted); } .comment-notes, .logged-in-as { font-size: 14px; color: var(--muted); } .form-submit { margin: 0; } .comment-form .form-submit input[type="submit"], .woocommerce #review_form #respond .form-submit input, .woocommerce #respond input#submit { min-height: 48px; padding: 12px 26px; border: 0; border-radius: 12px; background: var(--sun); color: var(--sun-ink); font: 700 15px/1.2 var(--f-body); box-shadow: 0 8px 22px -10px var(--sun); cursor: pointer; } .comment-form .form-submit input[type="submit"]:hover, .woocommerce #review_form #respond .form-submit input:hover, .woocommerce #respond input#submit:hover { background: var(--sun-hover); color: var(--sun-ink); } .woocommerce #review_form #respond p { margin: 0; } .comment-form-rating { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .comment-form-rating label { margin: 0 !important; } .woocommerce #review_form #respond p.stars { margin: 0; } .woocommerce p.stars a { width: 1.4em; height: 1.4em; margin-right: 4px; color: var(--sun); font-size: 22px; } .woocommerce p.stars a::before { color: var(--sun); } .woocommerce .star-rating span::before, .woocommerce .star-rating::before { color: var(--sun); } @media (max-width: 640px) { .comment-form, .woocommerce #review_form #respond .comment-form { grid-template-columns: 1fr; } } /* ---------- Single product ---------- */ .single-product .site-content { padding-top: clamp(24px, 3vw, 40px); } .single-product .inside-article { padding: clamp(22px, 4vw, 48px); border-radius: 22px; box-shadow: var(--shadow-card); } .woocommerce div.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; } .woocommerce div.product > * { float: none !important; width: auto !important; margin: 0 !important; } .woocommerce div.product > .woocommerce-tabs, .woocommerce div.product > .related, .woocommerce div.product > .upsells { grid-column: 1 / -1; } .woocommerce div.product > .onsale { position: absolute; } .woocommerce div.product .product_title { margin: 0 0 10px; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; color: var(--ink); } .woocommerce div.product .summary { display: grid; gap: 14px; align-content: start; } .woocommerce div.product .summary > * { margin: 0; } .woocommerce div.product p.price { font: 800 30px/1.1 var(--f-display); color: var(--ink); } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--muted); } .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 6px 0 0; } .woocommerce div.product form.cart .quantity .qty { width: 80px; min-height: 48px; border: 1.5px solid var(--line); border-radius: 12px; text-align: center; font-size: 16px; } .woocommerce div.product form.cart .single_add_to_cart_button { min-height: 48px; padding-inline: 28px; } .woocommerce div.product form.cart .ngda-gp-fields { flex: 0 0 100%; box-sizing: border-box; margin-bottom: 4px; } .woocommerce div.product .product_meta { padding-top: 14px; border-top: 1px dashed var(--line); font-size: 14px; color: var(--muted); } .woocommerce div.product .product_meta > span { display: block; } .ngda-product-art { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: end; gap: 16px; min-height: 380px; padding: 28px; border-radius: 20px; color: #fff; background: radial-gradient(320px circle at 80% 15%, color-mix(in srgb, var(--cc) 60%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--cc) 45%, var(--ink)), var(--ink) 80%); } .ngda-product-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.4px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%); } .art-icon { position: absolute; right: 28px; top: 28px; color: rgba(255, 255, 255, .85); } .art-icon .ngda-icon { width: 120px; height: 120px; stroke-width: 1.1; } .art-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .art-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); font-size: 15px; font-weight: 600; } .art-list .ngda-icon { width: 18px; height: 18px; color: #ffb48f; } .woocommerce div.product .woocommerce-tabs { padding-top: 8px; } .woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; overflow: visible; } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs::after, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; border-radius: 999px; background: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: inline-block; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 15px; font-weight: 700; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { background: var(--ink); border-color: var(--ink); color: #fff; } .woocommerce div.product .woocommerce-tabs .panel { margin: 0; padding: clamp(20px, 3vw, 32px); background: var(--bg); border: 1px solid var(--line); border-radius: 18px; box-shadow: none; } .woocommerce div.product .woocommerce-tabs .panel > h2:first-child { margin-top: 0; padding-left: 0; font-size: 22px; } .woocommerce div.product .woocommerce-tabs .panel > h2:first-child::before { display: none; } .woocommerce #reviews #comments { margin-bottom: 18px; } .woocommerce #reviews #comments .woocommerce-noreviews { margin: 0; color: var(--muted); } .woocommerce #reviews #respond { padding: 0; background: none; border: 0; } .woocommerce #review_form #respond .comment-reply-title { display: block; margin-bottom: 14px; font-size: 18px; } .woocommerce div.product .related > h2 { margin: 24px 0 18px; font-size: clamp(24px, 2.6vw, 30px); color: var(--ink); } @media (max-width: 860px) { .woocommerce div.product { grid-template-columns: 1fr; } .ngda-product-art { min-height: 280px; } .art-icon .ngda-icon { width: 84px; height: 84px; } } .post-article #comments, .post-article > .comment-respond { margin-top: 32px; } .comment-form .comment-form-url { grid-column: 1 / -1; } .comment-form .comment-form-author input, .comment-form .comment-form-email input, .comment-form .comment-form-url input { margin: 0; } /* ===================================================================== Shop, cart and checkout ===================================================================== */ .ngda-top-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; } .ngda-top-anchor:focus { outline: none; } /* ---------- Shop and product categories ---------- */ .shop-list { padding-top: clamp(28px, 4vw, 44px); } .shop-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; } .shop-toolbar .woocommerce-result-count { margin: 0; float: none; font-size: 15px; color: var(--muted); } .shop-toolbar .woocommerce-ordering { margin: 0; float: none; } .shop-toolbar .orderby { min-height: 44px; padding: 8px 40px 8px 14px; border: 1px solid var(--line); border-radius: 10px; background-color: var(--surface); color: var(--text); font: 600 15px/1.2 var(--f-body); } .woocommerce .shop-list ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; } .woocommerce .shop-list ul.products::before, .woocommerce .shop-list ul.products::after { display: none; } .woocommerce ul.products li.product { display: flex; flex-direction: column; width: auto; margin: 0; padding: 0; float: none; overflow: hidden; border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(11, 27, 63, .05); text-align: left; } .woocommerce ul.products li.product:hover { transform: none; border-color: #b9c6dc; box-shadow: var(--shadow-card); } .woocommerce ul.products li.product .woocommerce-loop-product__link { display: flex; flex: 1; flex-direction: column; color: inherit; text-decoration: none; } .woocommerce ul.products li.product a img { margin: 0; border-radius: 0; } .product-cover { position: relative; display: flex; align-items: flex-end; justify-content: space-between; height: 128px; padding: 16px 18px; background: linear-gradient(150deg, color-mix(in srgb, var(--cc) 40%, var(--ink)), var(--ink) 80%); color: #fff; } .product-cover .ngda-icon { width: 44px; height: 44px; stroke-width: 1.4; color: rgba(255, 255, 255, .85); } .product-cover-cat { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: 12px; font-weight: 700; letter-spacing: .04em; } .woocommerce ul.products li.product .woocommerce-loop-product__title { margin: 0; padding: 18px 20px 0; font: 700 20px/1.25 var(--f-display); color: var(--ink); } .woocommerce ul.products li.product .ngda-masked-domain { margin: 4px 20px 0; font-size: 14px; } .product-summary { margin: 8px 20px 0; font-size: 15px; line-height: 1.5; color: var(--muted); } .woocommerce ul.products li.product .price { display: block; margin: auto 20px 0; padding-top: 16px; font: 700 22px/1.2 var(--f-display); color: var(--ink); } .woocommerce ul.products li.product .price del { font-size: 15px; color: var(--muted); } .woocommerce ul.products li.product .button { display: flex; justify-content: center; align-self: stretch; margin: 16px 20px 20px; } .woocommerce ul.products li.product .added_to_cart { margin: -10px 20px 18px; font-size: 14px; font-weight: 700; } .woocommerce nav.woocommerce-pagination { margin-top: 36px; } .woocommerce nav.woocommerce-pagination ul { display: flex; justify-content: center; gap: 8px; border: 0; } .woocommerce nav.woocommerce-pagination ul li { border: 0; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 700; } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ink); border-color: var(--ink); color: #fff; } .shop-hero .chips a::before { display: none; } @media (max-width: 1024px) { .woocommerce .shop-list ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .woocommerce .shop-list ul.products { grid-template-columns: 1fr; } } /* ---------- Cart and checkout (WooCommerce blocks) ---------- */ .woo-content { font-size: 16px; } .woo-content a { color: var(--accent-text); } .woo-content .wc-block-components-sidebar-layout { margin: 0; } .woo-content .wc-block-components-main { padding-right: clamp(0px, 3vw, 36px); } .woo-content .wc-block-components-sidebar { padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); } .woo-content .wc-block-cart-items { border: 0; } .woo-content .wc-block-cart-items th, .woo-content .wc-block-cart__totals-title, .woo-content .wc-block-components-checkout-order-summary__title-text { padding-bottom: 10px; font: 700 12px/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .woo-content .wc-block-cart-items td { padding-block: 20px; border-color: var(--line); } .woo-content .wc-block-cart-item__image img { border-radius: 12px; background: var(--tint); } .woo-content .wc-block-components-product-name { font: 700 17px/1.3 var(--f-display); color: var(--ink); text-decoration: none; } .woo-content .wc-block-components-product-name:hover { color: var(--accent-text); } .woo-content .wc-block-components-product-metadata { color: var(--muted); font-size: 14px; } .woo-content .wc-block-components-quantity-selector { border-radius: 10px; border-color: var(--line); } .woo-content .wc-block-components-quantity-selector::after { border-radius: 10px; border-color: var(--line); } .woo-content .wc-block-cart-item__remove-link { color: var(--muted); } .woo-content .wc-block-components-totals-item__value, .woo-content .wc-block-components-product-price { font-variant-numeric: tabular-nums; } .woo-content .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .woo-content .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font: 700 20px/1.2 var(--f-display); color: var(--ink); } .woo-content .wc-block-components-button:not(.is-link) { min-height: 52px; border: 0; border-radius: 12px; background: var(--sun); color: var(--sun-ink); font: 700 16px/1.2 var(--f-body); text-decoration: none; box-shadow: none; } .woo-content .wc-block-components-button:not(.is-link):hover { background: var(--sun-hover); color: var(--sun-ink); } .woo-content .wc-block-components-button:not(.is-link) .wc-block-components-button__text { color: inherit; text-decoration: none; } .woo-content .wc-block-components-text-input input, .woo-content .wc-block-components-textarea, .woo-content .wc-blocks-components-select__select, .woo-content .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input { border: 1px solid #b9c6dc; border-radius: 10px; background: var(--surface); color: var(--text); } .woo-content .wc-block-components-text-input.is-active input, .woo-content .wc-block-components-text-input input:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } .woo-content .wc-block-components-checkout-step__title { font: 700 20px/1.25 var(--f-display); color: var(--ink); } .woo-content .wc-block-components-checkout-step { padding-bottom: 8px; } .woo-content .wc-block-components-checkout-step__description { color: var(--muted); } .woo-content .wc-block-components-radio-control__option, .woo-content .wc-block-components-radio-control-accordion-option { border-radius: 12px; } .woo-content .wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button { color: var(--muted); } .woo-content .wc-block-components-notice-banner { border-radius: 12px; } .woo-content .wp-block-woocommerce-empty-cart-block { text-align: center; } .woo-content .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title { font: 700 26px/1.2 var(--f-display); color: var(--ink); } .woo-content .wp-block-woocommerce-empty-cart-block .wp-block-separator { display: none; } .woo-content .wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) { margin-top: 32px; font: 700 20px/1.2 var(--f-display); } .woo-content .wc-block-checkout .wc-block-components-sidebar { padding: 0; border: 0; background: none; } .woo-content .wc-block-checkout .wp-block-woocommerce-checkout-order-summary-block { border-color: var(--line); border-radius: 16px; background: var(--bg); } .woo-content .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text { margin: 0; font: 700 12px/1.2 var(--f-body); letter-spacing: .1em; } .woo-content .wc-block-components-form .wc-block-components-text-input input[type], .woo-content .wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__select, .woo-content .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted { border-color: #b9c6dc; box-shadow: none; border-radius: 10px; } .woo-content .wc-block-components-form .wc-block-components-text-input input[type]:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } /* ---------- Team ---------- */ .team-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .member { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color .2s, box-shadow .2s; } .member:hover { border-color: #b9c6dc; box-shadow: var(--shadow-card); } .member-photo { aspect-ratio: 6 / 7; background: linear-gradient(160deg, color-mix(in srgb, var(--cc) 30%, var(--ink)), var(--ink) 85%); } .member-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .member-initials { display: grid; place-items: center; height: 100%; font: 700 64px/1 var(--f-display); color: rgba(255, 255, 255, .9); } .member-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 18px 20px 20px; } .member h3 { margin: 0; padding-right: 40px; font-size: 19px; line-height: 1.25; color: var(--ink); } .member-role { margin: 0; font-size: 14px; font-weight: 700; color: var(--cc); } .member-bio { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); } .member-focus { list-style: none; margin: auto 0 0; padding: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; } .member-focus li { padding: 3px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--text); } .member-link { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface); color: var(--ink); box-shadow: 0 4px 12px -6px rgba(11, 27, 63, .5); transition: background-color .2s, color .2s; } .member-link:hover { background: var(--ink); color: #fff; } .member-link .ngda-icon { width: 19px; height: 19px; } @media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } .member { flex-direction: row; } .member-photo { flex: none; width: 112px; aspect-ratio: auto; } .member-initials { font-size: 40px; } } /* ---------- Post covers with a featured image ---------- */ .post-cover .cover-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .post-cover.has-img::before { background: linear-gradient(0deg, rgba(11, 27, 63, .55), transparent 55%); -webkit-mask-image: none; mask-image: none; } .post-card:hover .cover-img { transform: scale(1.03); } /* ===================================================================== Guest post site browser and websites for sale ===================================================================== */ /* ---------- Browse sites ---------- */ .browse-gate { display: grid; justify-items: center; gap: 12px; max-width: 640px; text-align: center; } .browse-gate h2 { margin: 0; font-size: 26px; color: var(--ink); } .browse-gate p { margin: 0; color: var(--muted); } .browse-gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px !important; } .browse-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: end; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); } .browse-field { display: grid; gap: 6px; min-width: 0; } .browse-field span { font-size: 13px; font-weight: 700; color: var(--muted); } .browse-field select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #b9c6dc; border-radius: 10px; background-color: var(--surface); color: var(--text); font: 600 15px/1.2 var(--f-body); } .browse-actions { grid-column: 1 / -1; display: flex; gap: 10px; } .browse-count { margin: 22px 0 12px; font-size: 15px; font-weight: 700; color: var(--muted); } .browse-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); } .browse-table { width: 100%; border-collapse: collapse; font-size: 15px; } .browse-table th { padding: 12px 14px; background: var(--ink); color: #fff; font: 700 13px/1.2 var(--f-body); letter-spacing: .04em; text-align: left; white-space: nowrap; } .browse-table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle; } .browse-table tbody tr:hover td { background: var(--bg); } .browse-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .browse-table .site b { font-family: var(--f-display); color: var(--ink); } .browse-table .price { font-weight: 800; color: var(--ink); } .browse-table .go { text-align: right; } .browse-table .go .btn { min-height: 38px; padding: 8px 16px; font-size: 14px; box-shadow: none; } .dr-badge { display: inline-block; min-width: 38px; padding: 3px 8px; border-radius: 8px; background: var(--tint); color: var(--ink); font-weight: 800; text-align: center; } @media (max-width: 1024px) { .browse-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .browse-filters { grid-template-columns: 1fr 1fr; } .browse-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .browse-table, .browse-table tbody, .browse-table tr, .browse-table td { display: block; } .browse-table tr { padding: 14px 16px; border-top: 1px solid var(--line); } .browse-table tr:first-child { border-top: 0; } .browse-table td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; } .browse-table td::before { content: attr(data-label); font-weight: 700; color: var(--muted); text-align: left; } .browse-table td.go { display: block; padding-top: 10px; } .browse-table td.go::before { content: none; } .browse-table .go .btn { width: 100%; } } /* ---------- Websites for sale ---------- */ .listing-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .listing { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color .2s, box-shadow .2s; } .listing:hover { border-color: #b9c6dc; box-shadow: var(--shadow-card); } .listing-cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: linear-gradient(150deg, var(--ink-3), var(--ink) 80%); color: rgba(255, 255, 255, .8); } .listing-cover img { width: 100%; height: 100%; object-fit: cover; } .listing-cover-icon .ngda-icon { width: 54px; height: 54px; stroke-width: 1.3; } .listing-status, .listing-verified { position: absolute; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; } .listing-status { left: 12px; background: var(--leaf-soft); color: #0b5e43; } .listing.is-offer .listing-status { background: #fff1d6; color: #7a4a00; } .listing.is-sold .listing-status { background: #e9ecf2; color: var(--muted); } .listing-verified { right: 12px; background: var(--ink); color: #fff; } .listing-verified .ngda-icon { width: 14px; height: 14px; } .listing-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 20px 20px; } .listing-body .post-cat { --cc: var(--c-blue); } .listing h3 { margin: 0; font-size: 19px; line-height: 1.3; color: var(--ink); } .listing-desc { margin: 0; font-size: 15px; color: var(--muted); } .listing-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 0; } .listing-stats div { padding: 8px 10px; border-radius: 10px; background: var(--bg); } .listing-stats dt { font-size: 12px; font-weight: 700; color: var(--muted); } .listing-stats dd { margin: 0; font: 700 16px/1.3 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; } .listing-income { margin: 0; font-size: 14px; color: var(--muted); } .listing-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); } .listing-price { font: 800 22px/1.1 var(--f-display); color: var(--ink); } .listing .btn.is-disabled { pointer-events: none; opacity: .6; } .listing.is-sold .listing-price { color: var(--muted); text-decoration: line-through; } @media (max-width: 1024px) { .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .listing-grid { grid-template-columns: 1fr; } } .market-switch { margin-top: 28px; } /* ---------- Guest post order: buyer's own article ---------- */ .ngda-article { display: grid; gap: 12px; margin: 4px 0 0; padding: 16px 0 0; border: 0; border-top: 1px dashed var(--line); } .ngda-article legend { padding: 0; font: 700 15px/1.3 var(--f-display); color: var(--ink); } .ngda-article-hint { margin: -4px 0 0; font-size: 14px; color: var(--muted); } .ngda-article-note { font-size: 13px; color: var(--muted); } .ngda-gp-fields input[type="file"] { min-height: 0; padding: 10px; border-style: dashed; background: var(--bg); cursor: pointer; } .ngda-gp-fields input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font: 700 14px/1.2 var(--f-body); cursor: pointer; } /* ---------- Orders counter in the hero ---------- */ .hero-orders { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); font-size: 15px; color: var(--on-ink-muted); } .hero-orders b { font: 700 17px/1 var(--f-display); color: #fff; font-variant-numeric: tabular-nums; } .hero-orders-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sun); color: var(--sun-ink); } .hero-orders-icon .ngda-icon { width: 16px; height: 16px; } /* ---------- Single post header: featured image behind the title, byline ---------- */ .post-hero.has-img { background: var(--ink); } .post-hero-bg { position: absolute; inset: 0; z-index: -2; } .post-hero-bg img { width: 100%; height: 100%; object-fit: cover; } /* Colour overlay: solid enough on the left for the title, lighter on the right so the photo shows. */ .post-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 80%, transparent) 0%, color-mix(in srgb, var(--ink) 58%, transparent) 50%, color-mix(in srgb, var(--ink) 25%, transparent) 100%), linear-gradient(0deg, color-mix(in srgb, var(--ink) 45%, transparent), transparent 40%); } /* A lighter overlay lets more photo through; a soft shadow keeps the title readable on bright spots. */ .post-hero.has-img h1, .post-hero.has-img .subhero-lede, .post-hero.has-img .post-byline { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); } .post-hero.has-img::before { opacity: .5; } .post-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 26px; } .byline-person { display: flex; align-items: center; gap: 12px; } .byline-person img.avatar { object-fit: cover; border: 2px solid rgba(255, 255, 255, .25); } .byline-who { display: grid; line-height: 1.25; } .byline-who small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--on-ink-muted); } .byline-who b { font-family: var(--f-display); font-size: 15px; color: #fff; } .byline-role { font-size: 13px; color: var(--on-ink-muted); } .byline-dates { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--on-ink-muted); } @media (min-width: 900px) { .byline-dates { flex-basis: auto; padding-left: 28px; border-left: 1px solid rgba(255, 255, 255, .16); } } .author-box img.avatar { object-fit: cover; } .author-role { margin: -4px 0 6px !important; font-size: 14px !important; font-weight: 700; color: var(--accent-text) !important; } /* ---------- Websites page: three paths and the two forms ---------- */ .paths { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .paths.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .path { display: flex; flex-direction: column; gap: 10px; padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); } .path h2 { margin: 6px 0 0; font-size: 21px; line-height: 1.25; color: var(--ink); } .path p { margin: 0; color: var(--muted); font-size: 15px; } .path .btn { align-self: flex-start; margin-top: auto; } .form-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: start; } .form-split .head { margin: 0; position: sticky; top: calc(var(--header-h) + 24px); } .form-split .ticks { margin-top: 8px; } .form-split .ticks li { color: var(--text); } .form-split .estimator { margin-top: 10px; padding: 18px; border-radius: var(--r-card); background: var(--bg); border: 1px solid var(--line); } .wform select, .wform input, .wform textarea { width: 100%; } @media (max-width: 960px) { .paths, .paths.two { grid-template-columns: 1fr; } .form-split { grid-template-columns: 1fr; gap: 24px; } .form-split .head { position: static; } } /* ===================================================================== My Account: login / register, menu, dashboard ===================================================================== */ .woo-content #customer_login { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 0; } .woo-content #customer_login::before, .woo-content #customer_login::after { display: none; } .woo-content #customer_login > div { float: none; width: auto; padding: 0; } .woo-content #customer_login h2, .woo-content .woocommerce-form-login + h2 { margin: 0 0 14px; font: 700 24px/1.2 var(--f-display); color: var(--ink); } .woo-content form.login, .woo-content form.register, .woo-content form.lost_reset_password { margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); } .woo-content form .form-row { margin: 0 0 14px; padding: 0; } .woo-content form .form-row label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--ink); } .woo-content form .input-text { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #b9c6dc; border-radius: 10px; background: var(--surface); font-size: 16px; } .woo-content form .input-text:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 1px var(--ink); } .woo-content .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; font-weight: 500; } .woo-content .woocommerce-LostPassword { margin: 4px 0 0; font-size: 14px; } .woo-content .woocommerce-privacy-policy-text p { font-size: 13px; color: var(--muted); } .acct-register-intro { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: #fff1e9; color: var(--ink); font-size: 14.5px; font-weight: 600; } .woocommerce-account .woo-content > .woocommerce { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px; align-items: start; } .woocommerce-account .woo-content > .woocommerce::before, .woocommerce-account .woo-content > .woocommerce::after { display: none; } .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { float: none !important; width: auto !important; } .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); position: sticky; top: calc(var(--header-h) + 20px); } .woocommerce-MyAccount-navigation a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--text); font-weight: 600; text-decoration: none; } .woocommerce-MyAccount-navigation a:hover { background: var(--surface); color: var(--ink); } .woocommerce-MyAccount-navigation .is-active a { background: var(--ink); color: #fff; } .woocommerce-MyAccount-navigation-link--ngda-marketplace a { color: var(--accent-text); } .woocommerce-MyAccount-content > p:first-child { margin-top: 0; color: var(--muted); } .acct-block { margin-top: 26px; } .acct-block h2 { margin: 0 0 14px; font: 700 20px/1.25 var(--f-display); color: var(--ink); } .acct-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .acct-head a { font-size: 14px; font-weight: 700; } .acct-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .acct-order { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--cc, var(--line)); border-radius: 12px; background: var(--surface); } .acct-order p { margin: 0; } .acct-order-title { font-weight: 700; color: var(--ink); } .acct-order-next { font-size: 14px; color: var(--muted); } .acct-order .btn { min-height: 38px; padding: 8px 14px; font-size: 14px; } .acct-status { display: inline-block; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--cc, #8a94a6) 14%, #fff); color: color-mix(in srgb, var(--cc, #56627d) 75%, #000); font-size: 12.5px; font-weight: 800; white-space: nowrap; } .c-grey { --cc: #8a94a6; } .acct-empty { margin: 0; padding: 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); } .acct-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .acct-links a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-decoration: none; transition: border-color .2s, box-shadow .2s; } .acct-links a:hover { border-color: #b9c6dc; box-shadow: var(--shadow-card); } .acct-links .fact-icon { grid-row: 1 / span 2; width: 42px; height: 42px; } .acct-links b { color: var(--ink); font-family: var(--f-display); } .acct-links span:not(.fact-icon) { font-size: 13.5px; color: var(--muted); } .acct-help { margin: 16px 0 0; font-size: 14px; color: var(--muted); } @media (max-width: 860px) { .woo-content #customer_login, .woocommerce-account .woo-content > .woocommerce { grid-template-columns: 1fr; } .woocommerce-MyAccount-navigation ul { position: static; grid-template-columns: 1fr 1fr; } .acct-links { grid-template-columns: 1fr; } .acct-order { grid-template-columns: 1fr auto; } .acct-order .btn { grid-column: 1 / -1; justify-self: start; } } /* ---------- Admin-only price editor on cards ---------- */ .price-edit { margin-top: 12px; border: 1px dashed #b9c6dc; border-radius: 12px; background: #fffaf3; font-size: 14px; } .price-edit summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; } .price-edit summary::-webkit-details-marker { display: none; } .price-edit-tag { padding: 1px 8px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; } .price-edit form { display: grid; gap: 10px; padding: 0 12px 12px; } .price-edit label { display: grid; gap: 4px; font-weight: 600; color: var(--ink); } .price-edit input, .price-edit textarea { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #b9c6dc; border-radius: 8px; background: #fff; font: 15px/1.4 var(--f-body); } .price-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .price-edit-actions { display: flex; align-items: center; gap: 12px; } .price-edit-actions .btn { min-height: 38px; padding: 8px 16px; font-size: 14px; } .price-edit-ok { margin: 0 12px 10px; padding: 8px 10px; border-radius: 8px; background: var(--leaf-soft); color: #0b5e43; font-weight: 700; } .woocommerce ul.products li.product .price-edit { margin: 0 20px 20px; } .jump a.jump-all { margin-left: auto; background: var(--ink); border-color: var(--ink); color: #fff; } .jump a.jump-all::before { display: none; } .price-edit label, .price-edit-row > * { min-width: 0; } .price-edit input, .price-edit textarea { box-sizing: border-box; min-width: 0; max-width: 100%; } /* ---------- Team cards link to profiles; profile page ---------- */ .member h3 a { color: inherit; text-decoration: none; } .member h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .member:hover h3 a { color: var(--accent-text); } .member:focus-within { outline: 3px solid var(--c-blue); outline-offset: 2px; } .member h3 a:focus-visible { outline: none; } .member-link { z-index: 2; } .byline-who b a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; } .byline-who b a:hover { text-decoration-color: currentColor; } .profile-hero .wrap { padding-block: clamp(36px, 5vw, 64px); } .profile-head { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: center; } .profile-photo { aspect-ratio: 6 / 7; overflow: hidden; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .16); background: linear-gradient(160deg, var(--ink-3), var(--ink)); } .profile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .profile-photo .member-initials { font-size: 96px; } .profile-intro h1 { margin-top: 8px; } .profile-role { margin: 8px 0 0; font: 700 19px/1.3 var(--f-display); color: #ffb48f; } .profile-focus { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .profile-focus li { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: var(--on-ink); font-size: 14px; font-weight: 600; } .profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; } .profile-actions .ngda-icon-linkedin { width: 18px; height: 18px; } .profile-bio h2 { margin: 0 0 12px; padding: 0; font-size: 24px; } .profile-bio h2::before { display: none; } @media (max-width: 760px) { .profile-head { grid-template-columns: 1fr; } .profile-photo { max-width: 220px; } } /* ---------- Empty cart picks ---------- */ .empty-cart-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 24px; } .woocommerce.empty-cart-picks ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; text-align: left; } .woocommerce.empty-cart-picks ul.products::before, .woocommerce.empty-cart-picks ul.products::after { display: none; } .woo-content .wp-block-woocommerce-empty-cart-block h2.wp-block-heading:not(.wc-block-cart__empty-cart__title) { margin: 32px 0 16px; font: 700 20px/1.2 var(--f-display); text-align: center; } @media (max-width: 1024px) { .woocommerce.empty-cart-picks ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .woocommerce.empty-cart-picks ul.products { grid-template-columns: 1fr; } } .promo-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } /* Payment details after checkout (inc/payments.php) */ .ngda-paybox { margin: 0 0 28px; padding: 22px; background: var(--surface); border: 1.5px solid var(--ink); border-radius: var(--r-card); } .ngda-paybox h2 { margin: 0 0 14px; font-size: 20px; } .ngda-paybox dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin: 0; } .ngda-paybox dt { color: var(--muted); font-size: 14px; } .ngda-paybox dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; } .ngda-paybox code { padding: 2px 8px; border-radius: 6px; background: var(--bg); font-size: 15px; user-select: all; } .ngda-paybox-form { display: grid; gap: 8px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); } .ngda-paybox-form label { font-size: 14px; font-weight: 600; } .ngda-paybox-row { display: flex; gap: 10px; } .ngda-paybox-row input { flex: 1; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 16px; } .ngda-paybox-done { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--bg); font-size: 14px; } @media (max-width: 520px) { .ngda-paybox dl { grid-template-columns: 1fr; gap: 2px; } .ngda-paybox dd { margin-bottom: 8px; } .ngda-paybox-row { flex-direction: column; } } /* Account balance (inc/wallet.php) */ .balance-label { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .balance-amount { margin: 2px 0 0; font: 800 34px/1.1 var(--f-display); color: var(--ink); } .balance-note { margin: 6px 0 0; color: var(--muted); font-size: 14px; } .balance-head { padding: 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); } .acct-balance { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); } .acct-balance .balance-note { margin: 0; } .topup-form { display: grid; gap: 16px; max-width: 560px; } .topup-amount { display: grid; gap: 6px; font-weight: 600; font-size: 14px; } .topup-amount input { max-width: 220px; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 18px; font-weight: 700; } .topup-form .ngda-order-type input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); } .topup-form .ngda-order-type label { grid-template-columns: auto minmax(0, 1fr); } .topup-form .btn { justify-self: start; } .topup-help { margin: 0; color: var(--muted); font-size: 14px; } .balance-ledger { width: 100%; border-collapse: collapse; font-size: 14px; } .balance-ledger th, .balance-ledger td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; } .balance-ledger th { color: var(--muted); font-weight: 600; } .balance-ledger .is-in { color: #15803d; font-weight: 700; } .balance-ledger .is-out { font-weight: 700; } @media (max-width: 640px) { .acct-balance { grid-template-columns: 1fr; gap: 10px; } .acct-balance .btn { justify-self: start; } .balance-ledger th:nth-child(4), .balance-ledger td:nth-child(4) { display: none; } } .balance-figures { display: flex; flex-wrap: wrap; gap: 14px 40px; } .balance-amount.is-held { color: var(--muted); } .balance-ledger .is-muted { color: var(--muted); } .cart-pay-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--muted); } .cart-pay-note b { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 600; } .cart-pay-balance { margin: 10px 0 0; font-size: 13px; color: var(--muted); } .cart-pay-balance a { font-weight: 700; } .ngda-brief-title { margin: 0 0 2px; font: 700 16px/1.3 var(--f-display); color: var(--ink); } .ngda-brief textarea { min-height: 84px; resize: vertical; } /* Service order forms (inc/service-brief.php, inc/service-orders.php) */ .ngda-brief { gap: 18px; } .ngda-brief-lead { margin: 0; font-size: 14px; color: var(--muted); } .ngda-brief-set { display: grid; gap: 12px; margin: 0; padding: 16px 0 0; border: 0; border-top: 1px dashed var(--line); min-width: 0; } .ngda-brief-set:first-of-type { padding-top: 0; border-top: 0; } .ngda-brief-set > legend { padding: 0; margin: 0 0 4px; font: 700 16px/1.3 var(--f-display); color: var(--ink); } .ngda-brief-set:first-of-type > legend { margin-bottom: 8px; } .ngda-gp-fields .ngda-choices { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ngda-gp-fields .ngda-choices legend { width: 100%; padding: 0; margin: 0 0 6px; font-weight: 600; font-size: 14px; } .woocommerce form .ngda-choices label, .ngda-gp-fields .ngda-choices label { display: inline-flex; line-height: 1.3; margin: 0; align-items: center; gap: 8px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 500; cursor: pointer; } .ngda-choices label:has(input:checked) { border-color: var(--ink); background: var(--bg); } .ngda-gp-fields .ngda-choices input { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: var(--ink); } .ngda-brief [hidden] { display: none !important; } .ngda-brief-files { margin: 6px 0 0; font-size: 14px; } .ngda-steps { margin: 0 0 20px; } .ngda-steps ol { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; } .ngda-steps li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); } .ngda-steps li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; font-size: 13px; } .ngda-steps li.is-now { color: var(--ink); font-weight: 700; } .ngda-steps li.is-now span { border-color: var(--sun); background: var(--sun); color: var(--sun-ink); } .ngda-steps li.is-done span { border-color: var(--leaf); background: var(--leaf-soft); color: var(--leaf); } .ngda-steps p { margin: 10px 0 0; font-size: 14px; color: var(--muted); } .ngda-scope { margin: 18px 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .ngda-scope h2 { margin: 0 0 12px; font: 700 18px/1.3 var(--f-display); color: var(--ink); } .ngda-scope h3 { margin: 0 0 6px; font-size: 14px; color: var(--ink); } .ngda-scope-cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .ngda-scope ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; } .ngda-scope li { position: relative; padding-left: 22px; } .ngda-scope-in li::before { content: "\2713"; position: absolute; left: 0; color: var(--leaf); font-weight: 700; } .ngda-scope-out li::before { content: "\2715"; position: absolute; left: 0; color: var(--muted); } .ngda-scope-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 14px 0 0; font-size: 14px; } .ngda-scope-facts dt { font-weight: 700; color: var(--ink); } .ngda-scope-facts dd { margin: 0; } .ngda-scope-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); } .ngda-workcard { margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--cc, var(--c-blue)); border-radius: 12px; background: var(--surface); } .ngda-workcard h2 { margin: 0 0 6px; font: 700 18px/1.3 var(--f-display); color: var(--ink); } .ngda-workcard p { margin: 0 0 6px; } .ngda-deliverables { margin: 8px 0 0; padding-left: 18px; } .ngda-side { align-self: stretch; } .ngda-side-in { display: grid; gap: 18px; align-content: start; } .ngda-side .ngda-scope { margin: 0; } .woocommerce div.product .ngda-side div.images { float: none !important; width: auto !important; margin: 0 !important; } .ngda-side .ngda-product-art { min-height: 240px; } /* Kept in view beside the long form; site.js sets top so a column taller than the screen sticks by its bottom edge instead of hiding its end. */ @media (min-width: 861px) { .ngda-side-in { position: sticky; top: calc(var(--header-h) + 20px); } } /* Marketplace domain search */ .browse-search { grid-column: 1 / -1; display: grid; gap: 6px; } .browse-search label { font-size: 13px; font-weight: 700; color: var(--muted); } .browse-search-row { display: flex; gap: 10px; } .browse-search input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 14px; border: 1.5px solid #b9c6dc; border-radius: 10px; background: var(--surface); color: var(--text); font: 600 16px/1.2 var(--f-body); } .browse-search input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); } .browse-search .btn { flex: none; min-height: 48px; } .browse-table td.site a { color: var(--ink); text-decoration: none; white-space: nowrap; } .browse-table td.site a:hover b { text-decoration: underline; } /* Website-for-sale domain, contact email */ .listing-domain { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 4px; font-weight: 700; font-size: 15px; color: var(--accent-text); text-decoration: none; word-break: break-all; } .listing-domain .ngda-icon { flex: none; width: 16px; height: 16px; } a.listing-domain:hover { text-decoration: underline; } .ngda-foot-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; } .ngda-foot-email { display: inline-flex; align-items: center; gap: 8px; color: var(--on-ink); font-weight: 600; text-decoration: none; } .ngda-foot-email:hover { color: #fff; text-decoration: underline; } .contact-email { display: flex; gap: 14px; align-items: flex-start; margin: 20px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .contact-email-h { margin: 0 0 2px; font: 700 16px/1.3 var(--f-display); color: var(--ink); } .contact-email a { font-weight: 700; font-size: 17px; color: var(--accent-text); word-break: break-all; } .contact-email .small { margin: 4px 0 0; } /* Related services under a product: one row of compact cards */ .woocommerce div.product .related ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; } .woocommerce div.product .related ul.products::before, .woocommerce div.product .related ul.products::after { display: none; } .woocommerce .related ul.products li.product { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: center; width: auto !important; margin: 0 !important; float: none; } /* The card link's parts join the card grid, so price and button can share a row. */ .woocommerce .related ul.products li.product .woocommerce-loop-product__link { display: contents; } .related .product-cover { grid-column: 1 / -1; height: 64px; padding: 12px 16px; align-items: center; } .related .product-cover .ngda-icon { width: 26px; height: 26px; } .woocommerce .related ul.products li.product .woocommerce-loop-product__title { grid-column: 1 / -1; padding: 16px 18px 0; font-size: 18px; } .related .product-summary { grid-column: 1 / -1; margin: 6px 18px 0; font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .woocommerce .related ul.products li.product .price { grid-column: 1; margin: 0; padding: 16px 0 18px 18px; font-size: 20px; } .woocommerce .related ul.products li.product .button { grid-column: 2; margin: 16px 18px 18px 0; min-height: 40px; padding: 8px 16px; font-size: 14px; } .woocommerce .related ul.products li.product .screen-reader-text { position: absolute; } .related .price-edit { display: none; } @media (max-width: 860px) { .woocommerce div.product .related ul.products { grid-template-columns: 1fr; } } .ngda-scope .price-edit { margin-top: 14px; } .price-edit-check { display: flex !important; align-items: center; gap: 8px; font-weight: 600; } .price-edit .price-edit-check input { width: auto; min-height: 0; }