/* =========================================================
Samya Tech — Shared Brand Foundation
Put this at the TOP of ./assets/styles.css
========================================================= */
/* Optional: load Inter from Google Fonts.
Remove this @import if your hosting policy blocks it. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
:root {
/* Brand palette */
--background: #fdfaf5;
--foreground: #2b1d12;
--muted: #6f6259;
--primary: #b45309;
--secondary: #d97706;
--primary-rgb: 180, 83, 9;
--secondary-rgb: 217, 119, 6;
/* Typography */
--font-body:
"Inter",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;
--font-heading:
"Inter",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;
/* Layout */
--max-width: 75rem;
--header-height: 5rem;
/* Shape */
--radius-sm: 0.5rem;
--radius-md: 0.85rem;
--radius-lg: 1.1rem;
--radius-icon: 0.75rem;
--radius-pill: 999px;
/* Use-case surface tokens */
--card-bg: rgba(255, 255, 255, 0.72);
--card-border: rgba(var(--primary-rgb), 0.14);
--card-border-hover: rgba(var(--primary-rgb), 0.34);
--card-shadow: 0 14px 35px rgba(82, 49, 19, 0.08);
--card-shadow-hover: 0 22px 48px rgba(82, 49, 19, 0.15);
--transition: 180ms ease;
}
/* =========================================================
Baseline / Reset
========================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
min-width: 320px;
margin: 0;
overflow-x: hidden;
position: relative;
background: var(--background);
color: var(--foreground);
font-family: var(--font-body);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
}
a {
color: inherit;
text-decoration: none;
}
button,
input {
font: inherit;
}
button {
cursor: pointer;
}
/* =========================================================
Shared Page Width
========================================================= */
.container {
width: min(var(--max-width), calc(100% - 2.5rem));
margin-inline: auto;
}
/* =========================================================
Shared Background Art
Requires these elements inside :
========================================================= */
.animated-grid {
position: fixed;
inset: 0;
z-index: -3;
pointer-events: none;
background-image:
linear-gradient(
rgba(var(--primary-rgb), 0.04) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(var(--primary-rgb), 0.04) 1px,
transparent 1px
);
background-size: 80px 80px;
}
.noise-overlay {
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
opacity: 0.035;
background-image: radial-gradient(
circle,
rgba(var(--primary-rgb), 0.2) 1px,
transparent 1px
);
background-size: 4px 4px;
}
.hero-orb {
position: fixed;
z-index: -1;
border-radius: 50%;
pointer-events: none;
filter: blur(120px);
}
.orb-1 {
top: -14rem;
left: -12rem;
width: 32rem;
height: 32rem;
background: rgba(var(--primary-rgb), 0.09);
}
.orb-2 {
top: 25%;
right: -12rem;
width: 28rem;
height: 28rem;
background: rgba(var(--secondary-rgb), 0.08);
}
/* =========================================================
Shared Header / Navigation
========================================================= */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
height: var(--header-height);
background: rgba(253, 250, 245, 0.88);
border-bottom: 1px solid rgba(var(--primary-rgb), 0.12);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.brand,
.footer-brand {
display: inline-flex;
align-items: baseline;
gap: 0.3rem;
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: 0.08em;
}
.brand {
font-size: 1.05rem;
}
.brand-name {
color: var(--foreground);
}
.brand-tech {
color: var(--primary);
}
.main-nav {
display: flex;
align-items: center;
gap: 1.875rem;
}
.main-nav a {
position: relative;
color: var(--muted);
font-family: var(--font-heading);
font-size: 0.92rem;
font-weight: 600;
letter-spacing: -0.01em;
transition: color var(--transition);
}
.main-nav a:hover,
.main-nav a.active {
color: var(--primary);
}
.main-nav a.active::after {
content: "";
position: absolute;
right: 0;
bottom: -0.45rem;
left: 0;
height: 2px;
background: var(--primary);
border-radius: var(--radius-pill);
}
/* =========================================================
Shared Footer
========================================================= */
.site-footer {
position: relative;
z-index: 1;
background: rgba(253, 250, 245, 0.72);
border-top: 1px solid var(--card-border);
}
.footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 5.5rem;
}
.footer-brand {
font-size: 0.82rem;
}
.footer-text {
color: var(--muted);
font-size: 0.78rem;
}
/* =========================================================
Shared Accessibility / Responsive Rules
========================================================= */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
@media (max-width: 620px) {
:root {
--header-height: 4.25rem;
}
.container {
width: min(var(--max-width), calc(100% - 1.75rem));
}
.main-nav {
gap: 1rem;
}
.main-nav a {
font-size: 0.78rem;
}
.footer-inner {
min-height: 5rem;
}
}
@media (max-width: 420px) {
.brand {
font-size: 0.9rem;
}
.main-nav a:first-child {
display: none;
}
}