/* ========================================================================== TechData World Plc, theme stylesheet. A tech company and training institute. The look is engineered and crisp: deep emerald green on warm cream, one signal-green accent, a fine grid motif in the hero, disciplined cards. Everything is driven by CSS custom properties so the whole palette flips to the red + cream variant by setting data-theme="red" on (wired from setup.SiteSettings.theme). ========================================================================== */ :root { /* Green + cream (default) */ --brand: #1E7A46; /* deep emerald */ --brand-dark: #145536; --brand-darker: #0E3D27; --brand-soft: #E7F1EA; /* pale green wash */ --signal: #16B872; /* bright accent, used sparingly */ --cream: #F6F1E7; --cream-2: #FBF8F1; --ink: #13211A; /* near-black with a green cast */ --ink-soft: #47564E; --line: #E3DCCB; /* hairline on cream */ --white: #FFFFFF; --danger: #C0392B; --warn: #C77D00; --ok: #1E7A46; --radius: 10px; --radius-sm: 7px; --radius-lg: 18px; --shadow: 0 1px 2px rgba(19,33,26,.06), 0 8px 24px rgba(19,33,26,.06); --shadow-lg: 0 18px 48px rgba(14,61,39,.16); --maxw: 1200px; --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; } html[data-theme="red"] { --brand: #B02A25; /* deep brick red */ --brand-dark: #7F1D1A; --brand-darker: #5C1512; --brand-soft: #F6E7E5; --signal: #E4572E; --cream: #F7F1E9; --cream-2: #FCF8F3; --ink: #241615; --ink-soft: #5b4a48; --line: #E8DBD0; --ok: #1E7A46; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, .display { font-family: var(--font-display); color: var(--ink); line-height: 1.12; letter-spacing: -.01em; font-weight: 600; margin: 0 0 .5rem; } h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); } h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); } h3 { font-size: 1.25rem; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-dark); } p { margin: 0 0 1rem; } img { max-width: 100%; height: auto; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .section { padding: 84px 0; } .section.tight { padding: 56px 0; } .bg-cream2 { background: var(--cream-2); } .bg-brandsoft { background: var(--brand-soft); } .text-brand { color: var(--brand) !important; } .muted { color: var(--ink-soft); } .center { text-align: center; } .lead { font-size: 1.13rem; color: var(--ink-soft); max-width: 64ch; } .mx-auto { margin-left: auto; margin-right: auto; } /* Section heading block */ .eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--brand); background: var(--brand-soft); padding: .28rem .7rem; border-radius: 40px; margin-bottom: .8rem; } .section-head { max-width: 70ch; margin-bottom: 2.6rem; } .section-head.center { margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600; font-size: .96rem; padding: .72rem 1.35rem; border-radius: var(--radius-sm); border: 1.5px solid transparent; cursor: pointer; transition: .16s ease; line-height: 1; } .btn-brand { background: var(--brand); color: #fff; } .btn-brand:hover { background: var(--brand-dark); color: #fff; } .btn-outline { background: transparent; color: var(--brand); border-color: var(--brand); } .btn-outline:hover { background: var(--brand); color: #fff; } .btn-cream { background: var(--cream); color: var(--brand-dark); } .btn-cream:hover { background: #fff; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } .btn-sm { padding: .5rem .85rem; font-size: .85rem; } .btn-light { background: rgba(255,255,255,.14); color:#fff; border-color: rgba(255,255,255,.3);} .btn-light:hover { background: rgba(255,255,255,.24); color:#fff; } .btn-block { width: 100%; justify-content: center; } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { filter: brightness(.92); color:#fff; } /* -------------------------------------------------------------------------- Top bar + navbar -------------------------------------------------------------------------- */ .topbar { background: var(--brand-darker); color: rgba(255,255,255,.85); font-size: .84rem; } .topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 40px; } .topbar a { color: rgba(255,255,255,.85); } .topbar a:hover { color: #fff; } .topbar .tb-info { display: flex; gap: 1.4rem; flex-wrap: wrap; } .topbar .tb-info span, .topbar .tb-info a { display: inline-flex; align-items: center; gap: .4rem; } .topbar .tb-social { display: flex; gap: .35rem; } .topbar .tb-social a { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,.08); } .topbar .tb-social a:hover { background: var(--signal); color: #04120b; } .nav-wrap { background: var(--cream-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; } .nav { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 1rem; } .brand-logo { display: flex; align-items: center; gap: .65rem; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--ink); } .brand-logo .mark { width: 40px; height: 40px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; display: grid; place-items: center; font-size: 1.15rem; box-shadow: var(--shadow); } .brand-logo small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .68rem; color: var(--ink-soft); letter-spacing: .02em; } /* image logo variants */ .brand-logo img.brand-full { height: 46px; width: auto; display: block; } .brand-logo img.mark-img { width: 42px; height: 42px; border-radius: 11px; display: block; box-shadow: 0 4px 12px rgba(0,0,0,.18); } @media (max-width: 560px) { .brand-logo img.brand-full { height: 38px; } } .nav-links { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; } .nav-links > li > a { display: block; padding: .6rem .8rem; border-radius: 7px; color: var(--ink); font-weight: 500; font-size: .95rem; } .nav-links > li > a:hover { background: var(--brand-soft); color: var(--brand-dark); } .nav-links > li > a.active { color: var(--brand); font-weight: 600; } .nav-links > li > a.active::after { content:""; display:block; height:2px; background: var(--brand); border-radius: 2px; margin-top: 4px; } .nav-cta { display: flex; align-items: center; gap: .6rem; } .nav-toggle { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--ink); cursor: pointer; } /* dropdown */ .has-drop { position: relative; } .drop { position: absolute; top: 100%; left: 0; min-width: 230px; margin-top: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .4rem; display: none; z-index: 80; } /* transparent bridge across the visual gap so the menu does not vanish while the pointer travels from the nav item down to the links */ .drop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .has-drop:hover .drop, .has-drop:focus-within .drop { display: block; } .drop a { display: block; padding: .55rem .7rem; border-radius: 6px; color: var(--ink); font-size: .92rem; } .drop a:hover { background: var(--brand-soft); color: var(--brand-dark); } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { position: relative; background: var(--brand-darker); color: #fff; overflow: hidden; } .hero::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 46px 46px; opacity: .5; mask-image: radial-gradient(120% 90% at 80% 10%, #000 30%, transparent 75%); } .hero::after { content:""; position:absolute; right:-10%; top:-30%; width:620px; height:620px; background: radial-gradient(circle, var(--brand) 0%, transparent 62%); opacity:.55; } .hero .container { position: relative; z-index: 2; } .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; padding: 96px 0; } .hero h1 { color: #fff; } .hero p.lead { color: rgba(255,255,255,.82); } .hero .kicker { color: var(--signal); font-family: var(--font-display); font-weight: 600; letter-spacing:.03em; margin-bottom: .8rem; } .hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; } .hero-panel { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); padding: 1.4rem; backdrop-filter: blur(4px); } .hero-panel h4 { color:#fff; font-size:1rem; } .hero-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; } .hero-stat { background: rgba(255,255,255,.05); border-radius: var(--radius); padding: 1rem; } .hero-stat .n { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: #fff; } .hero-stat .l { font-size: .82rem; color: rgba(255,255,255,.75); } /* page banner (interior pages) */ .page-banner { background: var(--brand-darker); color:#fff; position: relative; overflow:hidden; } .page-banner::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 40px 40px; opacity:.4; mask-image: radial-gradient(120% 100% at 90% 0%, #000 20%, transparent 70%); } .page-banner .container { position: relative; z-index:2; padding: 64px 0; } .page-banner h1 { color:#fff; margin-bottom:.4rem; } .crumbs { color: rgba(255,255,255,.7); font-size:.9rem; } .crumbs a { color: rgba(255,255,255,.85); } .crumbs a:hover { color:#fff; } /* -------------------------------------------------------------------------- Grid + cards -------------------------------------------------------------------------- */ .grid { display: grid; gap: 1.4rem; } .g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; transition: .18s ease; } .card.hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; } .card .ic { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 1.5rem; margin-bottom: 1rem; } .card h3 { margin-bottom: .4rem; } .card p { color: var(--ink-soft); margin-bottom: .6rem; font-size: .96rem; } .card .more { font-weight: 600; font-family: var(--font-display); font-size: .9rem; } /* media card (image on top) */ .mcard { background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; transition:.18s ease; display:flex; flex-direction:column;} .mcard.hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .mcard .thumb { aspect-ratio: 16/10; background: var(--brand-soft); overflow:hidden; } .mcard .thumb img { width:100%; height:100%; object-fit: cover; } .mcard .body { padding: 1.2rem 1.3rem 1.4rem; flex:1; display:flex; flex-direction:column; } .mcard .body h3 { font-size: 1.12rem; } .mcard .meta { font-size:.82rem; color: var(--ink-soft); margin-bottom:.5rem; } .tag { display:inline-block; font-size:.74rem; font-weight:600; color: var(--brand-dark); background: var(--brand-soft); padding:.2rem .55rem; border-radius: 30px; } .price { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--brand); } /* team / people */ .person { text-align:center; } .person .avatar { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; margin: 0 auto .8rem; border: 3px solid #fff; box-shadow: var(--shadow); background: var(--brand-soft); } .person .role { color: var(--brand); font-size:.9rem; font-weight:600; } .person .socials { margin-top:.5rem; display:flex; gap:.4rem; justify-content:center; } .person .socials a { width:30px;height:30px;border-radius:7px;background:var(--cream);display:grid;place-items:center;color:var(--ink-soft);} .person .socials a:hover { background: var(--brand); color:#fff; } /* leader row */ .leader { display:grid; grid-template-columns: 150px 1fr; gap:1.5rem; align-items:center; background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:1.4rem; } .leader img { width:150px; height:150px; border-radius: 12px; object-fit:cover; background:var(--brand-soft); } .leader .pos { color: var(--brand); font-weight:600; } /* stats band */ .stats-band { background: var(--brand); color:#fff; } .stats-band .grid { text-align:center; } .stat .n { font-family: var(--font-display); font-size: 2.6rem; font-weight:700; } .stat .l { color: rgba(255,255,255,.82); } /* partners */ .partner-strip { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:center; } .partner-strip .p { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.4rem; min-width: 150px; text-align:center; display:flex; align-items:center; justify-content:center; gap:.6rem; } .partner-strip .p img { max-height: 46px; } /* testimonial */ .quote { background:#fff; border:1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); padding:1.5rem; } .quote .who { display:flex; align-items:center; gap:.7rem; margin-top:1rem; } .quote .who img { width:42px;height:42px;border-radius:50%;object-fit:cover; background:var(--brand-soft);} .stars { color: var(--warn); letter-spacing:1px; } /* value / list */ .tick { display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.7rem; } .tick i { color: var(--brand); font-size:1.15rem; margin-top:.1rem; } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .field { margin-bottom: 1rem; } .field label { display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem; color: var(--ink); } .input, .select, .textarea, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=url], input[type=tel], select, textarea { width:100%; padding:.7rem .85rem; border:1.5px solid var(--line); border-radius: var(--radius-sm); background:#fff; color: var(--ink); font-family: var(--font-body); font-size:.96rem; } textarea { min-height: 120px; resize: vertical; } .input:focus, .select:focus, .textarea:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } .help { font-size:.82rem; color: var(--ink-soft); margin-top:.25rem; } .check { display:flex; align-items:center; gap:.5rem; } .check input { width:auto; } .form-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: var(--shadow); } .two-col { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; } /* radio pills for payment method */ .pmethods { display:flex; gap:.6rem; flex-wrap:wrap; } .pmethods label { flex:1; min-width: 120px; border:1.5px solid var(--line); border-radius: var(--radius-sm); padding:.7rem .8rem; cursor:pointer; display:flex; align-items:center; gap:.5rem; font-weight:500; } .pmethods input { display:none; } .pmethods input:checked + span { color: var(--brand); font-weight:700; } .pmethods label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); } /* -------------------------------------------------------------------------- Alerts / messages -------------------------------------------------------------------------- */ .alert { padding:.85rem 1.1rem; border-radius: var(--radius-sm); margin-bottom:1rem; border:1px solid; font-size:.94rem; } .alert-success { background:#E8F5EC; border-color:#BFE3CC; color:#1a5c37; } .alert-error, .alert-danger { background:#FBEAE8; border-color:#F0C4BF; color:#8f2018; } .alert-info { background:#E9F0FB; border-color:#C6D8F2; color:#274b86; } .alert-warning { background:#FCF3E2; border-color:#EFD9AE; color:#8a5b00; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .footer { background: var(--brand-darker); color: rgba(255,255,255,.75); padding-top: 68px; } .footer h5 { color:#fff; font-family: var(--font-display); font-size:1.02rem; margin-bottom:1rem; } .footer a { color: rgba(255,255,255,.75); } .footer a:hover { color:#fff; } .footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 2.2rem; } .footer .flinks { list-style:none; padding:0; margin:0; } .footer .flinks li { margin-bottom:.55rem; } .footer .fbrand .brand-logo { color:#fff; margin-bottom:1rem; } .footer .fbrand .brand-logo small { color: rgba(255,255,255,.6); } .foot-social { display:flex; gap:.5rem; margin-top:1rem; } .foot-social a { width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;} .foot-social a:hover { background: var(--signal); color:#04120b; } .news-form { display:flex; gap:.5rem; margin-top:.8rem; } .news-form input { background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; } .news-form input::placeholder { color: rgba(255,255,255,.55); } .footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top: 52px; padding: 22px 0; font-size:.86rem; } .footer-bottom .container { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; } /* contact info blocks */ .cinfo { display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.2rem; } .cinfo .ic { width:44px;height:44px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:1.2rem; flex:none;} /* gallery */ .masonry { columns: 3; column-gap: 1rem; } .masonry img { width:100%; border-radius: var(--radius); margin-bottom:1rem; display:block; border:1px solid var(--line); } /* faq */ .acc { background:#fff; border:1px solid var(--line); border-radius: var(--radius); margin-bottom:.7rem; overflow:hidden; } .acc summary { padding:1rem 1.2rem; font-weight:600; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; } .acc summary::-webkit-details-marker { display:none; } .acc summary::after { content:"\002B"; color: var(--brand); font-size:1.2rem; } .acc[open] summary::after { content:"\2212"; } .acc .a { padding: 0 1.2rem 1.2rem; color: var(--ink-soft); } /* prose (legal / detail bodies) */ .prose { max-width: 76ch; } .prose h2,.prose h3 { margin-top: 1.6rem; } .prose p, .prose li { color: var(--ink-soft); } .prose ul { padding-left: 1.1rem; } .divider { height:1px; background: var(--line); border:0; margin: 0; } /* Two-column detail layouts that collapse on mobile. .split = content + right sidebar (1fr 360px) .split.aside = content + narrower sidebar (1fr 300px) .split.left = left sidebar + content (340px 1fr, used on contact) */ .split { display:grid; gap:2.4rem; align-items:start; grid-template-columns: 1fr 360px; } .split.aside { grid-template-columns: 1fr 300px; } .split.left { grid-template-columns: 340px 1fr; } @media (max-width: 900px) { .split, .split.aside, .split.left { grid-template-columns: 1fr; gap: 1.8rem; } } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 992px) { .hero-grid { grid-template-columns: 1fr; gap: 2rem; padding: 64px 0; } .g-4 { grid-template-columns: repeat(2,1fr); } .g-3 { grid-template-columns: repeat(2,1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .masonry { columns: 2; } } @media (max-width: 760px) { .section { padding: 56px 0; } .topbar .tb-info { display:none; } .nav-toggle { display:block; } .nav-links { position: absolute; top: 74px; left:0; right:0; background: var(--cream-2); border-bottom:1px solid var(--line); flex-direction: column; align-items: stretch; padding: .6rem; gap:.2rem; display:none; box-shadow: var(--shadow-lg); } .nav-links.open { display:flex; } .nav-links > li > a.active::after { display:none; } .drop { position: static; display:block; box-shadow:none; border:0; padding-left:1rem; margin-top:0; } .drop::before { display:none; } .has-drop:hover .drop { display:block; } .g-2,.g-3,.g-4 { grid-template-columns: 1fr; } .two-col { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .leader { grid-template-columns: 1fr; text-align:center; } .leader img { margin:0 auto; } .masonry { columns: 1; } } /* reduced motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }