/* ═══════════════════════════════════════════════ StrazX — Shared Stylesheet Direction: Authority (Navy · Blue · Orange) ═══════════════════════════════════════════════ */: root{ --bg: #F8FAFC; --bg2: #EFF6FF; --bg3: #DBEAFE; --text: #1E3A5F; --sub: #334E7A; --muted: #64748B; --border: rgba(30, 58, 95, 0.15); --border-faint: rgba(30, 58, 95, 0.07); --shadow: rgba(30, 58, 95, 0.15); --accent: #EA580C; --accent-hi: #C2440A; --blue: #2563EB; --logo-fill: #F8FAFC; --fh: 'Outfit', sans-serif; --fb: 'DM Sans', sans-serif; --trans: 0.3s ease; --radius: 14px; --radius-sm: 8px; --radius-pill: 100px; } [data-theme="dark"]{ --bg: #0F1C2E; --bg2: #162236; --bg3: #1E3A5F; --text: #F8FAFC; --sub: #93C5FD; --muted: #94A3B8; --border: rgba(248, 250, 252, 0.12); --border-faint: rgba(248, 250, 252, 0.06); --shadow: rgba(0, 0, 0, 0.3); --accent: #EA580C; --accent-hi: #C2440A; --blue: #3B82F6; --logo-fill: #F8FAFC; } *, *: : before, *: : after{ box-sizing: border-box; margin: 0; padding: 0; } html{ scroll-behavior: smooth; } body{ font-family: var(--fb); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; transition: background var(--trans), color var(--trans); overflow-x: hidden; } img{ max-width: 100%; height: auto; display: block; } a{ color: inherit; } .hex-bg{ position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.55; background-image: url("data: image/svg+xml,%3Csvg xmlns='http: //www.w3.org/2000/svg' width='60' height='104'%3E%3Cpath d='M30 2L58 17V47L30 62L2 47V17Z' stroke='%232563EB' stroke-opacity='0.07' fill='none'/%3E%3C/svg%3E"); } h1, h2, h3, h4, h5{ font-family: var(--fh); line-height: 1.15; font-weight: 700; } .eyebrow{ display: inline-block; font-family: var(--fh); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.3rem 0.9rem; margin-bottom: 1.25rem; } .container{ width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .section{ position: relative; z-index: 2; padding: 5rem 0; } .section--alt{ background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } main{ position: relative; z-index: 2; flex: 1; } #site-header{ position: sticky; top: 0; z-index: 100; } nav{ background: rgba(30, 58, 95, 0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(248, 250, 252, 0.1); display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; height: 68px; transition: background var(--trans); } [data-theme="dark"] nav{ background: rgba(15, 28, 46, 0.97); } .nav-logo{ display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .nav-logo svg{ height: 56px; width: auto; filter: drop-shadow(0 2px 8px rgba(30, 58, 95, 0.4)); } .logo-main-text{ fill: #F8FAFC; transition: fill var(--trans); } .logo-slogan{ fill: rgba(248, 250, 252, 0.6); transition: fill var(--trans); } #xGrad-stop-1{ stop-color: #F8FAFC; } .nav-links{ display: flex; align-items: center; gap: 2rem; } .nav-link{ font-family: var(--fh); font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(248, 250, 252, 0.72); text-decoration: none; transition: color 0.2s; position: relative; padding-bottom: 2px; } .nav-link: : after{ content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: #EA580C; transform: scaleX(0); transition: transform 0.2s; } .nav-link: hover, .nav-link--active{ color: #F8FAFC; } .nav-link--active: : after, .nav-link: hover: : after{ transform: scaleX(1); } .nav-right{ display: flex; align-items: center; gap: 0.75rem; } .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--fh); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; border: none; cursor: pointer; transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s; } .btn: hover{ transform: translateY(-2px); } .btn-primary{ padding: 0.85rem 1.75rem; background: var(--accent); color: #FFFFFF; border-radius: var(--radius-pill); font-size: 0.82rem; box-shadow: 0 4px 20px rgba(234, 88, 12, 0.3); } .btn-primary: hover{ background: var(--accent-hi); box-shadow: 0 8px 28px rgba(234, 88, 12, 0.4); } .btn-outline{ padding: 0.85rem 1.75rem; background: transparent; color: var(--accent); border: 1.5px solid var(--accent); border-radius: var(--radius-pill); font-size: 0.82rem; } .btn-outline: hover{ background: rgba(234, 88, 12, 0.08); } .btn-ghost{ padding: 0.4rem 0; background: transparent; color: var(--accent); border-radius: 0; font-size: 0.78rem; border-bottom: 1px solid transparent; } .btn-ghost: hover{ border-bottom-color: var(--accent); transform: none; } .btn-nav{ padding: 0.5rem 1.1rem; background: var(--accent); color: #FFFFFF; border-radius: var(--radius-pill); font-family: var(--fh); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; text-decoration: none; transition: opacity 0.2s, transform 0.2s; } .btn-nav: hover{ opacity: 0.88; transform: translateY(-1px); } .theme-btn{ width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(248, 250, 252, 0.22); background: #1E3A5F; color: #F8FAFC; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s, background 0.2s; } .theme-btn: hover{ border-color: #EA580C; } [data-theme="dark"] .theme-btn{ background: #162236; } [data-theme="dark"] .icon-sun{ display: none; } [data-theme="light"] .theme-btn: : after{ display: none; } .icon-sun{ stroke: #F8FAFC; fill: none; flex-shrink: 0; } .theme-btn: : after{ content: "◐"; color: #F8FAFC; font-size: 14px; margin-left: 2px; display: inline-block; } .hamburger{ display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(248, 250, 252, 0.22); background: transparent; cursor: pointer; padding: 9px; flex-shrink: 0; } .hamburger span{ display: block; height: 1.5px; background: #F8FAFC; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; } .mobile-nav{ display: none; position: fixed; inset: 0; z-index: 150; background: var(--bg); flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; } .mobile-nav.open{ display: flex; } .mobile-nav .nav-link{ font-size: 1.1rem; color: var(--text); } .mobile-nav .nav-link: hover, .mobile-nav .nav-link--active{ color: var(--accent); } .mobile-nav-close{ position: absolute; top: 1.25rem; right: 1.25rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg2); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; } .card{ background: var(--bg2); border: 1px solid var(--border-faint); border-radius: var(--radius); overflow: hidden; transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s; } .card: hover{ transform: translateY(-4px); border-color: var(--border); box-shadow: 0 8px 32px rgba(30, 58, 95, 0.12); } .clr-print{ --cat-clr: #2563EB; } .clr-engrave{ --cat-clr: #EA580C; } .clr-crystal{ --cat-clr: #a78bfa; } .clr-brand{ --cat-clr: #2563EB; } .product-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .card-visual{ height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .card-visual.print{ background: linear-gradient(135deg, rgba(37,99,235,0.10) 0%, rgba(30,58,95,0.03) 100%); } .card-visual.engrave{ background: linear-gradient(135deg, rgba(234,88,12,0.10) 0%, rgba(30,58,95,0.03) 100%); } .card-visual.crystal{ background: linear-gradient(135deg, rgba(167,139,250,0.12) 0%, rgba(30,58,95,0.03) 100%); } .card-visual.brand{ background: linear-gradient(135deg, rgba(37,99,235,0.10) 0%, rgba(30,58,95,0.03) 100%); } .card-body{ padding: 1.1rem 1.15rem 1.2rem; flex: 1; display: flex; flex-direction: column; } .card-body h3{ font-family: var(--fh); font-size: 0.92rem; font-weight: 700; margin-bottom: 0.4rem; line-height: 1.3; } .card-body p{ font-size: 0.8rem; color: var(--sub); line-height: 1.6; flex: 1; margin-bottom: 1rem; } .card-price{ font-family: var(--fh); font-size: 1rem; font-weight: 700; color: var(--accent); margin-bottom: 0.75rem; } .card-btn-buy{ display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem; background: var(--accent); color: #FFFFFF; border-radius: var(--radius-sm); font-family: var(--fh); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; transition: background 0.2s; } .card-btn-buy: hover{ background: var(--accent-hi); transform: none; } .card-btn-quote{ display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-sm); font-family: var(--fh); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; transition: background 0.2s; } .card-btn-quote: hover{ background: rgba(234, 88, 12, 0.08); transform: none; } .form-group{ margin-bottom: 1.25rem; } .form-label{ display: block; font-family: var(--fh); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sub); margin-bottom: 0.45rem; } .form-input, .form-select, .form-textarea{ width: 100%; padding: 0.75rem 1rem; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--fb); font-size: 0.9rem; outline: none; transition: border-color 0.2s; } .form-input: : placeholder, .form-textarea: : placeholder{ color: var(--muted); } .form-input: focus, .form-select: focus, .form-textarea: focus{ border-color: var(--blue); } .form-textarea{ resize: vertical; min-height: 120px; } .form-select{ appearance: none; background-image: url("data: image/svg+xml,%3Csvg xmlns='http: //www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748B' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.5rem; cursor: pointer; } .footer-main{ background: #1E3A5F; border-top: none; padding: 4rem 0 2.5rem; } .footer-grid{ display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; } .footer-col h4{ font-family: var(--fh); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(248, 250, 252, 0.45); margin-bottom: 1rem; } .footer-links{ list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .footer-links a{ font-size: 0.85rem; color: rgba(248, 250, 252, 0.7); text-decoration: none; transition: color 0.2s; } .footer-links a: hover{ color: #EA580C; } .footer-tagline{ font-size: 0.82rem; color: rgba(248, 250, 252, 0.65); line-height: 1.65; margin-top: 0.75rem; } .footer-social{ display: flex; gap: 0.75rem; margin-top: 1.25rem; } .footer-social a{ width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(248, 250, 252, 0.2); display: flex; align-items: center; justify-content: center; color: rgba(248, 250, 252, 0.6); text-decoration: none; transition: border-color 0.2s, color 0.2s; } .footer-social a: hover{ border-color: #EA580C; color: #EA580C; } .footer-seo{ font-size: 0.68rem; color: rgba(248, 250, 252, 0.35); line-height: 1.8; margin-top: 1.25rem; } .footer-areas{ font-size: 0.84rem; color: rgba(248, 250, 252, 0.7); line-height: 1.9; } .footer-address{ font-style: normal; font-size: 0.78rem; color: rgba(248, 250, 252, 0.5); margin-top: 0.75rem; } .footer-address a{ text-decoration: none; transition: color 0.2s; } .footer-address a: hover{ color: #EA580C; } .footer-ship-note{ margin-top: 1.25rem; padding: 0.85rem; background: rgba(248, 250, 252, 0.07); border-radius: var(--radius-sm); border: 1px solid rgba(248, 250, 252, 0.12); font-size: 0.75rem; color: rgba(248, 250, 252, 0.65); line-height: 1.6; font-family: var(--fh); } .footer-ship-note strong{ color: #EA580C; display: block; margin-bottom: 0.2rem; } .footer-bar{ background: #162236; border-top: 1px solid rgba(248, 250, 252, 0.08); padding: 1.25rem 0; } .footer-bar-inner{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; } .footer-copy{ font-family: var(--fh); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(248, 250, 252, 0.35); } .footer-copy a{ text-decoration: none; transition: color 0.2s; } .footer-copy a: hover{ color: #EA580C; } .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .text-accent{ color: var(--accent); } .text-blue{ color: var(--blue); } .text-teal{ color: var(--blue); } .text-muted{ color: var(--muted); } .text-sub{ color: var(--sub); } @keyframes fup{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: none; } } .anim-fup{ animation: fup 0.7s ease both; } .anim-fup-1{ animation: fup 0.7s 0.1s ease both; } .anim-fup-2{ animation: fup 0.7s 0.2s ease both; } .anim-fup-3{ animation: fup 0.7s 0.3s ease both; } @media (max-width: 900px){ .product-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px){ nav{ padding: 0 1rem; height: 60px; } .nav-links{ display: none; } .hamburger{ display: flex; } .nav-logo svg{ height: 46px; } .btn-nav{ display: none; } .footer-grid{ grid-template-columns: 1fr; gap: 2.5rem; } .footer-main{ padding: 3rem 0 2rem; } .footer-bar-inner{ flex-direction: column; align-items: flex-start; gap: 0.75rem; } .section{ padding: 3.5rem 0; } } @media (max-width: 480px){ .product-grid{ grid-template-columns: 1fr; } .container{ padding: 0 1rem; } } @media (max-width: 400px){ .nav-logo svg{ height: 40px; } }