/* ============================================================================
VCONNECT USA — INNER PAGE STYLES
----------------------------------------------------------------------------
This file EXTENDS css/style.css. It reuses the same design tokens
(--c-navy, --c-gold, --f-display, etc.) and only adds components that
the homepage didn't need: compact page hero, forms, FAQ accordion,
prose for legal pages, job cards, timeline, etc.
Load order in :
============================================================================ */
/* ============================================================================
SHARED: PAGE HERO (compact hero for all inner pages)
============================================================================ */
.page-hero {
background:
radial-gradient(ellipse at top right, rgba(59,169,217,0.18) 0%, transparent 55%),
linear-gradient(135deg, var(--c-navy) 0%, var(--c-navy-light) 100%);
color: var(--c-white);
padding: 80px var(--pad-x) 72px;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(135deg, transparent, black 60%);
pointer-events: none;
}
.page-hero-inner {
max-width: var(--max-w);
margin: 0 auto;
position: relative;
z-index: 1;
}
.page-hero .crumbs {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-gold);
margin-bottom: 22px;
font-weight: 600;
}
.page-hero .crumbs a { color: var(--c-gold); opacity: 0.75; }
.page-hero .crumbs a:hover { opacity: 1; }
.page-hero .crumbs .sep { margin: 0 10px; opacity: 0.4; }
.page-hero h1 {
font-family: var(--f-display);
font-weight: 600;
font-size: clamp(34px, 4.8vw, 56px);
line-height: 1.05;
letter-spacing: -0.025em;
max-width: 880px;
margin-bottom: 18px;
font-variation-settings: "opsz" 144;
}
.page-hero h1 em { font-style: italic; font-weight: 400; color: var(--c-gold-light); }
.page-hero .lead {
font-size: clamp(15px, 1.3vw, 18px);
line-height: 1.6;
color: rgba(255,255,255,0.75);
max-width: 680px;
}
/* ============================================================================
SHARED: PAGE BODY WRAPPERS
============================================================================ */
.page-section {
padding: 90px var(--pad-x);
background: var(--c-white);
}
.page-section.alt { background: var(--c-cream); }
.page-section-inner {
max-width: var(--max-w);
margin: 0 auto;
}
.page-section-narrow {
max-width: 860px;
margin: 0 auto;
}
.section-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
color: var(--c-gold);
text-transform: uppercase;
margin-bottom: 14px;
}
.section-title {
font-family: var(--f-display);
font-weight: 600;
font-size: clamp(28px, 3.4vw, 40px);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--c-navy);
margin-bottom: 18px;
}
.section-title em { font-style: italic; font-weight: 500; color: var(--c-gold); }
.section-intro {
font-size: 16px;
line-height: 1.65;
color: var(--c-muted);
max-width: 620px;
margin-bottom: 48px;
}
.section-intro.center { margin-left: auto; margin-right: auto; text-align: center; }
/* ============================================================================
SHARED: PROSE (for long-form legal / policy / about pages)
============================================================================ */
.prose {
font-size: 16px;
line-height: 1.75;
color: #2a3754;
}
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
font-family: var(--f-display);
font-weight: 600;
font-size: 26px;
color: var(--c-navy);
letter-spacing: -0.015em;
margin-top: 2em;
margin-bottom: 0.5em;
line-height: 1.2;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
font-family: var(--f-display);
font-weight: 600;
font-size: 20px;
color: var(--c-navy);
margin-top: 1.6em;
margin-bottom: 0.4em;
line-height: 1.25;
}
.prose p { color: #3a4866; }
.prose a { color: var(--c-gold); border-bottom: 1px solid currentColor; }
.prose a:hover { color: var(--c-navy); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.45em; }
.prose strong { color: var(--c-navy); font-weight: 600; }
.prose .effective {
display: inline-block;
padding: 6px 14px;
background: var(--c-cream);
border-left: 3px solid var(--c-gold);
font-size: 13px;
color: var(--c-muted);
letter-spacing: 0.04em;
margin-bottom: 32px;
}
.prose blockquote {
margin: 1.4em 0;
padding: 18px 24px;
background: var(--c-cream);
border-left: 3px solid var(--c-gold);
font-style: italic;
color: var(--c-navy);
}
/* ============================================================================
SHARED: TWO-COLUMN SPLIT (about, sourcing, partnerships intros)
============================================================================ */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: start;
}
.split.center { align-items: center; }
/* ============================================================================
ABOUT: VALUES, STATS, MILESTONES
============================================================================ */
.value-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.value-card {
padding: 34px 28px;
border: 1px solid var(--c-border);
border-radius: 6px;
background: var(--c-white);
transition: all 0.3s var(--ease);
}
.value-card:hover {
border-color: var(--c-gold);
transform: translateY(-3px);
box-shadow: 0 18px 36px -18px rgba(15,30,77,0.18);
}
.value-card .num {
font-family: var(--f-display);
font-style: italic;
font-size: 14px;
color: var(--c-gold);
margin-bottom: 14px;
}
.value-card h4 {
font-family: var(--f-display);
font-weight: 600;
font-size: 22px;
color: var(--c-navy);
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.value-card p {
font-size: 14px;
line-height: 1.65;
color: var(--c-muted);
}
.stat-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
padding: 48px 0;
border-top: 1px solid var(--c-border);
border-bottom: 1px solid var(--c-border);
}
.stat {
border-left: 2px solid var(--c-gold);
padding-left: 18px;
}
.stat .n {
font-family: var(--f-display);
font-weight: 600;
font-size: 38px;
color: var(--c-navy);
line-height: 1;
letter-spacing: -0.02em;
margin-bottom: 6px;
}
.stat .l {
font-size: 12px;
letter-spacing: 0.15em;
color: var(--c-muted);
text-transform: uppercase;
}
/* ============================================================================
SOURCING & CAREERS: TIMELINE
============================================================================ */
.timeline {
position: relative;
padding-left: 32px;
}
.timeline::before {
content: '';
position: absolute;
left: 6px; top: 8px; bottom: 8px;
width: 1px;
background: var(--c-border);
}
.timeline-step {
position: relative;
padding-bottom: 36px;
}
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step::before {
content: '';
position: absolute;
left: -32px; top: 6px;
width: 13px; height: 13px;
background: var(--c-gold);
border-radius: 50%;
box-shadow: 0 0 0 4px var(--c-cream), 0 0 0 5px var(--c-border);
}
.timeline-step .step-num {
font-family: var(--f-display);
font-style: italic;
font-size: 13px;
color: var(--c-gold);
letter-spacing: 0.04em;
margin-bottom: 6px;
}
.timeline-step h4 {
font-family: var(--f-display);
font-weight: 600;
font-size: 22px;
color: var(--c-navy);
margin-bottom: 10px;
}
.timeline-step p {
font-size: 15px;
line-height: 1.65;
color: var(--c-muted);
max-width: 620px;
}
/* ============================================================================
CAREERS: JOB LIST
============================================================================ */
.job-list {
border-top: 1px solid var(--c-border);
}
.job-item {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr auto;
gap: 24px;
align-items: center;
padding: 26px 8px;
border-bottom: 1px solid var(--c-border);
transition: background 0.2s var(--ease);
}
.job-item:hover { background: var(--c-cream); }
.job-item .role {
font-family: var(--f-display);
font-weight: 600;
font-size: 19px;
color: var(--c-navy);
letter-spacing: -0.01em;
}
.job-item .dept,
.job-item .loc {
font-size: 13px;
color: var(--c-muted);
letter-spacing: 0.05em;
}
.job-item .apply {
font-size: 13px;
font-weight: 600;
color: var(--c-gold);
letter-spacing: 0.04em;
white-space: nowrap;
}
.job-item .apply:hover { color: var(--c-navy); }
/* ============================================================================
CONTACT: GRID + INFO CARDS
============================================================================ */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 64px;
align-items: start;
}
.contact-info .info-block {
padding: 22px 0;
border-bottom: 1px solid var(--c-border);
}
.contact-info .info-block:first-child { padding-top: 0; }
.contact-info .info-block:last-child { border-bottom: none; }
.contact-info h5 {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-gold);
margin-bottom: 10px;
}
.contact-info p,
.contact-info a {
font-size: 15px;
color: var(--c-navy);
line-height: 1.55;
}
.contact-info a:hover { color: var(--c-gold); }
.contact-info .muted { color: var(--c-muted); font-size: 13px; margin-top: 4px; }
/* ============================================================================
FORMS (contact, quote, careers apply)
============================================================================ */
.form-wrapper {
padding: 36px;
background: var(--c-cream);
border-radius: 6px;
border: 1px solid var(--c-border);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--c-navy);
margin-bottom: 8px;
}
.form-field label .req { color: var(--c-gold); margin-left: 3px; }
.form-field input,
.form-field select,
.form-field textarea {
font-family: var(--f-body);
font-size: 15px;
color: var(--c-navy);
background: var(--c-white);
border: 1px solid var(--c-border);
border-radius: 4px;
padding: 12px 14px;
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-field textarea { resize: vertical; min-height: 140px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--c-gold);
box-shadow: 0 0 0 3px rgba(59,169,217,0.15);
}
.form-field .hint {
font-size: 12px;
color: var(--c-muted);
margin-top: 6px;
}
.form-actions {
margin-top: 24px;
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.form-submit {
background: var(--c-navy);
color: var(--c-white);
padding: 14px 28px;
border-radius: 999px;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.04em;
transition: all 0.2s var(--ease);
cursor: pointer;
}
.form-submit:hover {
background: var(--c-gold);
transform: translateY(-2px);
box-shadow: 0 14px 28px -8px rgba(59,169,217,0.45);
}
.form-note {
font-size: 12px;
color: var(--c-muted);
line-height: 1.5;
}
.form-success {
padding: 16px 20px;
background: rgba(59,169,217,0.1);
border-left: 3px solid var(--c-gold);
color: var(--c-navy);
font-size: 14px;
margin-bottom: 18px;
border-radius: 3px;
}
.form-success strong { color: var(--c-navy); }
/* ============================================================================
TRACK YOUR ORDER
============================================================================ */
.track-box {
display: grid;
grid-template-columns: 1fr 200px 180px;
gap: 10px;
padding: 18px;
background: var(--c-cream);
border-radius: 6px;
border: 1px solid var(--c-border);
}
.track-box input,
.track-box select {
padding: 14px 16px;
font-family: var(--f-body);
font-size: 15px;
border: 1px solid var(--c-border);
border-radius: 4px;
background: var(--c-white);
color: var(--c-navy);
}
.track-box input:focus,
.track-box select:focus {
outline: none; border-color: var(--c-gold);
box-shadow: 0 0 0 3px rgba(59,169,217,0.15);
}
.track-box button {
background: var(--c-navy);
color: var(--c-white);
padding: 14px 20px;
border-radius: 4px;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.04em;
transition: all 0.2s var(--ease);
cursor: pointer;
}
.track-box button:hover { background: var(--c-gold); }
.track-result {
margin-top: 28px;
padding: 28px;
background: var(--c-white);
border: 1px solid var(--c-border);
border-left: 3px solid var(--c-gold);
border-radius: 4px;
}
.track-result h4 {
font-family: var(--f-display);
font-weight: 600;
font-size: 20px;
color: var(--c-navy);
margin-bottom: 14px;
}
.track-result .t-row {
display: grid;
grid-template-columns: 150px 1fr;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--c-border);
font-size: 14px;
}
.track-result .t-row:last-child { border-bottom: none; }
.track-result .t-row .lbl {
color: var(--c-muted);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 11px;
padding-top: 2px;
}
/* ============================================================================
FAQ ACCORDION (uses native )
============================================================================ */
.faq-list { border-top: 1px solid var(--c-border); }
.faq-list details {
border-bottom: 1px solid var(--c-border);
padding: 22px 4px;
transition: background 0.2s var(--ease);
}
.faq-list details[open] { background: var(--c-cream); padding-left: 18px; padding-right: 18px; }
.faq-list summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
font-family: var(--f-display);
font-weight: 600;
font-size: 18px;
color: var(--c-navy);
line-height: 1.4;
letter-spacing: -0.01em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
content: '+';
flex-shrink: 0;
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
color: var(--c-gold);
font-size: 22px;
font-weight: 400;
transition: transform 0.3s var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .answer {
margin-top: 14px;
color: var(--c-muted);
font-size: 15px;
line-height: 1.7;
max-width: 760px;
}
.faq-list .answer p + p,
.faq-list .answer p + ul { margin-top: 10px; }
.faq-list .answer ul { padding-left: 20px; list-style: disc; }
.faq-list .answer li { margin-bottom: 6px; }
.faq-cat-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-gold);
margin: 56px 0 14px;
}
.faq-cat-label:first-child { margin-top: 0; }
/* ============================================================================
TABLES (shipping rates, warranty periods)
============================================================================ */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.data-table th,
.data-table td {
text-align: left;
padding: 14px 16px;
border-bottom: 1px solid var(--c-border);
}
.data-table thead th {
background: var(--c-cream);
color: var(--c-navy);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.data-table tbody tr:hover { background: var(--c-cream); }
.data-table td { color: var(--c-muted); }
.data-table td:first-child { color: var(--c-navy); font-weight: 600; }
/* ============================================================================
PRESS & MEDIA
============================================================================ */
.press-list { border-top: 1px solid var(--c-border); }
.press-item {
padding: 26px 0;
border-bottom: 1px solid var(--c-border);
display: grid;
grid-template-columns: 130px 1fr auto;
gap: 28px;
align-items: start;
}
.press-item .date {
font-size: 12px;
color: var(--c-muted);
letter-spacing: 0.1em;
text-transform: uppercase;
padding-top: 4px;
}
.press-item h4 {
font-family: var(--f-display);
font-weight: 600;
font-size: 20px;
color: var(--c-navy);
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.press-item .source {
font-size: 13px;
color: var(--c-muted);
}
.press-item .read {
font-size: 13px;
font-weight: 600;
color: var(--c-gold);
white-space: nowrap;
}
.press-item .read:hover { color: var(--c-navy); }
.kit-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 30px;
}
.kit-card {
padding: 28px;
background: var(--c-cream);
border-radius: 6px;
border: 1px solid var(--c-border);
transition: all 0.3s var(--ease);
}
.kit-card:hover { border-color: var(--c-gold); background: var(--c-white); }
.kit-card h5 {
font-family: var(--f-display);
font-weight: 600;
font-size: 18px;
color: var(--c-navy);
margin-bottom: 8px;
}
.kit-card p {
font-size: 13px;
color: var(--c-muted);
margin-bottom: 14px;
line-height: 1.6;
}
.kit-card .dl {
font-size: 12px;
font-weight: 700;
color: var(--c-gold);
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* ============================================================================
PARTNERSHIPS: EXTENDED (builds on .gw-partners from style.css)
============================================================================ */
.anchor-offset { scroll-margin-top: 100px; }
/* ============================================================================
ACTIVE NAV LINK
============================================================================ */
.gw-nav-menu a.is-active { color: var(--c-gold); }
.gw-nav-menu a.is-active::after { transform: scaleX(1); }
/* ============================================================================
IN-CONTEXT LINK STYLING
============================================================================ */
/* Links inside the dark page-hero .lead paragraph */
.page-hero .lead a {
color: var(--c-gold-light);
border-bottom: 1px solid currentColor;
}
.page-hero .lead a:hover { color: var(--c-white); }
/* Gold inline links used in form notes / muted helper text */
.a-gold { color: var(--c-gold); }
.a-gold:hover { color: var(--c-navy); }
/* ============================================================================
FORM HEADINGS (inside .form-wrapper)
============================================================================ */
.form-heading {
font-family: var(--f-display);
font-weight: 600;
font-size: 22px;
color: var(--c-navy);
letter-spacing: -0.01em;
margin-bottom: 18px;
}
.form-heading.lg { font-size: 26px; margin-bottom: 8px; letter-spacing: -0.015em; }
.form-intro {
color: var(--c-muted);
font-size: 14px;
margin-bottom: 24px;
line-height: 1.5;
}
/* ============================================================================
UTILITY — spacing + alignment
============================================================================ */
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-56 { margin-top: 56px; }
.text-center { text-align: center; }
/* ============================================================================
RESPONSIVE — matches breakpoints in style.css (900px, 600px)
============================================================================ */
@media (max-width: 900px) {
.page-hero { padding: 56px var(--pad-x) 50px; }
.page-section { padding: 64px var(--pad-x); }
.split { grid-template-columns: 1fr; gap: 40px; }
.value-grid { grid-template-columns: 1fr; }
.stat-row { grid-template-columns: 1fr 1fr; gap: 28px; }
.contact-grid { grid-template-columns: 1fr; gap: 40px; }
.form-grid { grid-template-columns: 1fr; }
.track-box { grid-template-columns: 1fr; }
.job-item {
grid-template-columns: 1fr;
gap: 6px;
padding: 20px 8px;
}
.job-item .apply { margin-top: 6px; }
.press-item { grid-template-columns: 1fr; gap: 8px; }
.press-item .date { padding-top: 0; }
.kit-grid { grid-template-columns: 1fr; }
.track-result .t-row { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 600px) {
.form-wrapper { padding: 22px; }
.page-hero h1 { font-size: 30px; }
.stat-row { grid-template-columns: 1fr; }
.faq-list summary { font-size: 16px; }
.prose { font-size: 15px; }
.prose h2 { font-size: 22px; }
.data-table { font-size: 13px; }
.data-table th, .data-table td { padding: 10px 10px; }
}
/* ============================================================================
SMS / MOBILE PRIVACY NOTICE (callout box used on contact page)
============================================================================ */
.sms-notice {
background: var(--c-cream);
border-left: 3px solid var(--c-gold);
border-radius: 4px;
padding: 16px 18px;
margin-top: 4px;
}
.sms-notice-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
color: var(--c-gold);
}
.sms-notice-head svg {
width: 18px;
height: 18px;
flex-shrink: 0;
stroke: currentColor;
}
.sms-notice-head h5 {
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--c-gold);
}
.sms-notice p {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: var(--c-muted);
}