initial commit
This commit is contained in:
Sergei Vasilev
commit
212909283c
BIN
fmimage.png
Normal file
BIN
fmimage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
211
index.html
Normal file
211
index.html
Normal file
@ -0,0 +1,211 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>IQON | Consultancy That Moves Business</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="IQON helps organizations align technology decisions with measurable business outcomes through strategy, architecture, and transformation consulting."
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Sora:wght@300;400;600;700;800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<a class="brand" href="#">
|
||||
<svg class="brand-mark" viewBox="0 0 44 44" aria-hidden="true">
|
||||
<circle cx="22" cy="22" r="21" fill="#0A0A0A" stroke="#0A0A0A" stroke-width="1"></circle>
|
||||
<circle cx="22" cy="22" r="20" stroke="#FFD000" stroke-width="1.5" fill="none"></circle>
|
||||
<ellipse cx="22" cy="22" rx="13" ry="12" fill="#FFD000"></ellipse>
|
||||
<ellipse cx="22" cy="22" rx="13" ry="12" fill="url(#eyeGlow)"></ellipse>
|
||||
<path
|
||||
d="M22 10.5 C19.2 14 18.2 18 18.2 22 C18.2 26 19.2 30 22 33.5 C24.8 30 25.8 26 25.8 22 C25.8 18 24.8 14 22 10.5Z"
|
||||
fill="#0A0A0A"
|
||||
></path>
|
||||
<ellipse
|
||||
cx="17"
|
||||
cy="16.5"
|
||||
rx="2.2"
|
||||
ry="3.2"
|
||||
fill="rgba(255,255,255,0.32)"
|
||||
transform="rotate(-22 17 16.5)"
|
||||
></ellipse>
|
||||
<circle cx="26.5" cy="26" r="1" fill="rgba(255,255,255,0.12)"></circle>
|
||||
<defs>
|
||||
<radialGradient id="eyeGlow" cx="40%" cy="38%" r="65%">
|
||||
<stop offset="0%" stop-color="#FFE84D" stop-opacity=".7"></stop>
|
||||
<stop offset="50%" stop-color="#FFD000" stop-opacity="0"></stop>
|
||||
<stop offset="100%" stop-color="#AA8000" stop-opacity=".15"></stop>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<span class="brand-name">iqon</span>
|
||||
</a>
|
||||
<nav class="main-nav" aria-label="Primary">
|
||||
<a href="#approach">How's Business?</a>
|
||||
<a href="#services">Services & Solutions</a>
|
||||
<a href="#cases">Case Studies</a>
|
||||
<a href="#contacts">Contacts</a>
|
||||
</nav>
|
||||
<a class="nav-cta" href="#contacts">Book Discovery Call</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero" id="approach">
|
||||
<div class="hero-copy reveal">
|
||||
<p class="eyebrow">Our Proprietary Consultive Approach</p>
|
||||
<h1>Technology decisions with business consequences in view.</h1>
|
||||
<p class="lead">
|
||||
Ask. Understand. Challenge. Propose. We transform complex IT initiatives into
|
||||
predictable outcomes for leadership teams.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="btn btn-solid" href="#contacts">Start a conversation</a>
|
||||
<a class="btn btn-outline" href="#services">Explore services</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-cloud reveal">
|
||||
<span>Systems</span>
|
||||
<span>Technology</span>
|
||||
<span>Engineering</span>
|
||||
<span>Implementation</span>
|
||||
<span>Outsourcing</span>
|
||||
<strong>How's IT<br />Business?</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="service-strip" id="services">
|
||||
<article class="service-tile reveal">
|
||||
<h2>Enterprise Management & Decision Support</h2>
|
||||
<p>Executive visibility, governance rhythm, and strategic decision intelligence.</p>
|
||||
</article>
|
||||
<article class="service-tile reveal">
|
||||
<h2>Industry Specific Services</h2>
|
||||
<p>Domain-led delivery models for regulated and high-complexity sectors.</p>
|
||||
</article>
|
||||
<article class="service-tile reveal">
|
||||
<h2>IS Advisory Services</h2>
|
||||
<p>Architecture guidance that links platform choices to growth goals.</p>
|
||||
</article>
|
||||
<article class="service-tile reveal">
|
||||
<h2>IT Infrastructure Services</h2>
|
||||
<p>Resilient, right-sized infrastructure with cost and risk under control.</p>
|
||||
</article>
|
||||
<article class="service-tile reveal">
|
||||
<h2>Mobility Consulting Services</h2>
|
||||
<p>Modern digital experiences and field-ready operating models.</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="method">
|
||||
<div class="section-head reveal">
|
||||
<p class="eyebrow">Method</p>
|
||||
<h3>From uncertainty to delivery confidence.</h3>
|
||||
</div>
|
||||
<ol class="steps">
|
||||
<li class="reveal">
|
||||
<span>01</span>
|
||||
<div>
|
||||
<h4>Ask</h4>
|
||||
<p>Frame business objectives, constraints, and expectations with leadership.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="reveal">
|
||||
<span>02</span>
|
||||
<div>
|
||||
<h4>Understand</h4>
|
||||
<p>Assess architecture, teams, process maturity, and delivery bottlenecks.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="reveal">
|
||||
<span>03</span>
|
||||
<div>
|
||||
<h4>Challenge</h4>
|
||||
<p>Test assumptions and de-risk roadmap choices before execution begins.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="reveal">
|
||||
<span>04</span>
|
||||
<div>
|
||||
<h4>Propose</h4>
|
||||
<p>Deliver an actionable transformation blueprint with measurable KPIs.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section class="cases" id="cases">
|
||||
<div class="section-head reveal">
|
||||
<p class="eyebrow">Success Story</p>
|
||||
<h3>Stabilized enterprise delivery and cut time-to-decision by 35%.</h3>
|
||||
</div>
|
||||
<div class="case-grid">
|
||||
<div class="case-visual reveal">
|
||||
<div class="chart-box" aria-hidden="true">
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
<article class="case-copy reveal">
|
||||
<p>
|
||||
A regional enterprise faced fragmented reporting and delayed investment decisions.
|
||||
IQON redesigned governance, aligned architecture to business streams, and introduced
|
||||
a portfolio-level decision framework.
|
||||
</p>
|
||||
<ul>
|
||||
<li>35% faster strategic decision cycle</li>
|
||||
<li>22% reduction in duplicated platform spend</li>
|
||||
<li>Cross-team execution model adopted in 90 days</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-band">
|
||||
<h3>Need clarity on your next IT move?</h3>
|
||||
<p>We can turn ambiguity into a practical roadmap in a two-week advisory sprint.</p>
|
||||
<a class="btn btn-dark" href="#contacts">Talk to IQON</a>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer id="contacts">
|
||||
<div class="footer-grid">
|
||||
<section>
|
||||
<h4>Latest Case Studies</h4>
|
||||
<ul>
|
||||
<li>Operating model redesign for a financial group</li>
|
||||
<li>Infrastructure modernization for retail network</li>
|
||||
<li>Advisory program for digital public services</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Our Services</h4>
|
||||
<ul>
|
||||
<li>Mobility Consulting Services</li>
|
||||
<li>IT Infrastructure Services</li>
|
||||
<li>IS Advisory Services</li>
|
||||
<li>Industry Specific Services</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Contact</h4>
|
||||
<p>10th Montreal Sq. 3rd Floor 3.01 bis Office, 011469 Bucharest, Romania</p>
|
||||
<p>T +4 037 261 2600</p>
|
||||
<p>F +4 037 261 2608</p>
|
||||
<p>office@iqon.com</p>
|
||||
</section>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>Home | Services & Solutions | Case Studies | Contacts</p>
|
||||
<p>2011-2026 Copyright IQON. All Rights Reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
40
script.js
Normal file
40
script.js
Normal file
@ -0,0 +1,40 @@
|
||||
const reveals = document.querySelectorAll(".reveal");
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("on");
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.18 }
|
||||
);
|
||||
|
||||
reveals.forEach((item, idx) => {
|
||||
item.style.transitionDelay = `${Math.min(idx * 45, 280)}ms`;
|
||||
observer.observe(item);
|
||||
});
|
||||
|
||||
const navLinks = document.querySelectorAll(".main-nav a");
|
||||
|
||||
const sectionObserver = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
navLinks.forEach((link) => {
|
||||
link.classList.toggle("active", link.getAttribute("href") === `#${entry.target.id}`);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.55 }
|
||||
);
|
||||
|
||||
["approach", "services", "cases", "contacts"].forEach((id) => {
|
||||
const section = document.getElementById(id);
|
||||
if (section) {
|
||||
sectionObserver.observe(section);
|
||||
}
|
||||
});
|
||||
22487
server71.hosting.reg.ru_1500.mhtml
Normal file
22487
server71.hosting.reg.ru_1500.mhtml
Normal file
File diff suppressed because it is too large
Load Diff
475
styles.css
Normal file
475
styles.css
Normal file
@ -0,0 +1,475 @@
|
||||
:root {
|
||||
--bg: #f1f1ef;
|
||||
--surface: #ffffff;
|
||||
--ink: #0a0a0a;
|
||||
--muted: #666666;
|
||||
--line: #e3e3dd;
|
||||
--accent: #ffd000;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Space Grotesk", sans-serif;
|
||||
background: radial-gradient(circle at 85% -20%, #fff8d1 0%, transparent 46%), var(--bg);
|
||||
color: var(--ink);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
background: rgba(241, 241, 239, 0.96);
|
||||
border-bottom: 1px solid var(--line);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.7rem;
|
||||
text-decoration: none;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-family: "Sora", sans-serif;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
text-transform: lowercase;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.main-nav a {
|
||||
text-decoration: none;
|
||||
color: #232323;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.main-nav a:hover,
|
||||
.main-nav a.active {
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
text-decoration: none;
|
||||
color: var(--ink);
|
||||
background: var(--accent);
|
||||
border: 1px solid #d2ab00;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
padding: 0.7rem 1rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
min-height: 74vh;
|
||||
border-bottom: 2px solid var(--accent);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
padding: 5rem 3rem;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 1.1rem;
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.26em;
|
||||
text-transform: uppercase;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 1.3rem;
|
||||
max-width: 16ch;
|
||||
font-family: "Sora", sans-serif;
|
||||
font-size: clamp(2rem, 3.2vw, 3.8rem);
|
||||
line-height: 1.03;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.lead {
|
||||
max-width: 55ch;
|
||||
margin-bottom: 2rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 0.7rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.85rem 1.15rem;
|
||||
border: 1px solid var(--ink);
|
||||
}
|
||||
|
||||
.btn-solid {
|
||||
background: var(--accent);
|
||||
border-color: #d2ab00;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
background: var(--ink);
|
||||
color: #fff;
|
||||
border-color: var(--ink);
|
||||
}
|
||||
|
||||
.hero-cloud {
|
||||
background: #050505;
|
||||
color: #2e2e35;
|
||||
padding: 2.2rem;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 0.4rem;
|
||||
text-transform: uppercase;
|
||||
font-family: "Sora", sans-serif;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.hero-cloud span {
|
||||
font-size: clamp(1.9rem, 4.2vw, 4.1rem);
|
||||
line-height: 0.95;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.hero-cloud strong {
|
||||
margin-top: 0.6rem;
|
||||
color: var(--accent);
|
||||
font-size: clamp(2rem, 5vw, 5.1rem);
|
||||
line-height: 0.94;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.service-strip {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.service-tile {
|
||||
background: #e8e8e6;
|
||||
border-right: 1px solid #d6d6d2;
|
||||
padding: 1.3rem 1rem 1.7rem;
|
||||
}
|
||||
|
||||
.service-tile:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.service-tile h2 {
|
||||
margin: 0 0 0.7rem;
|
||||
font-family: "Sora", sans-serif;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.service-tile p {
|
||||
margin: 0;
|
||||
color: #555;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.method,
|
||||
.cases {
|
||||
padding: 4.6rem 2rem;
|
||||
}
|
||||
|
||||
.section-head h3 {
|
||||
margin: 0 0 2rem;
|
||||
max-width: 28ch;
|
||||
font-family: "Sora", sans-serif;
|
||||
font-size: clamp(1.6rem, 2.6vw, 2.7rem);
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.steps {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 1px;
|
||||
background: var(--line);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.steps li {
|
||||
background: #fff;
|
||||
padding: 1.4rem;
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.steps span {
|
||||
font-family: "Sora", sans-serif;
|
||||
color: #adadad;
|
||||
font-size: 0.82rem;
|
||||
letter-spacing: 0.16em;
|
||||
}
|
||||
|
||||
.steps h4 {
|
||||
margin: 0 0 0.45rem;
|
||||
text-transform: uppercase;
|
||||
font-family: "Sora", sans-serif;
|
||||
}
|
||||
|
||||
.steps p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.cases {
|
||||
background: #f7f7f5;
|
||||
border-top: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.case-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 300px 1fr;
|
||||
gap: 2rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.case-visual {
|
||||
background: #ffd000;
|
||||
border: 8px solid #f0f0ee;
|
||||
box-shadow: 0 0 0 1px #dfdfd8;
|
||||
min-height: 220px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.chart-box {
|
||||
width: 72%;
|
||||
height: 110px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.chart-box span {
|
||||
flex: 1;
|
||||
background: #0f0f0f;
|
||||
}
|
||||
|
||||
.chart-box span:nth-child(1) {
|
||||
height: 25%;
|
||||
}
|
||||
.chart-box span:nth-child(2) {
|
||||
height: 35%;
|
||||
}
|
||||
.chart-box span:nth-child(3) {
|
||||
height: 48%;
|
||||
}
|
||||
.chart-box span:nth-child(4) {
|
||||
height: 62%;
|
||||
}
|
||||
.chart-box span:nth-child(5) {
|
||||
height: 76%;
|
||||
}
|
||||
.chart-box span:nth-child(6) {
|
||||
height: 92%;
|
||||
}
|
||||
|
||||
.case-copy p {
|
||||
margin-top: 0;
|
||||
color: #4f4f4f;
|
||||
}
|
||||
|
||||
.case-copy ul {
|
||||
margin: 1rem 0 0;
|
||||
padding-left: 1.1rem;
|
||||
}
|
||||
|
||||
.case-copy li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.cta-band {
|
||||
padding: 4.3rem 2rem;
|
||||
background: linear-gradient(120deg, #ffd000 0%, #ffc200 58%, #fdb600 100%);
|
||||
border-top: 2px solid #111;
|
||||
}
|
||||
|
||||
.cta-band h3 {
|
||||
margin: 0 0 0.7rem;
|
||||
font-family: "Sora", sans-serif;
|
||||
font-size: clamp(1.8rem, 3vw, 3rem);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.cta-band p {
|
||||
margin: 0 0 1.3rem;
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
footer {
|
||||
background: #ecece8;
|
||||
padding: 3rem 2rem 1.3rem;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1.6rem;
|
||||
padding-bottom: 1.8rem;
|
||||
border-bottom: 1px solid #d5d5cf;
|
||||
}
|
||||
|
||||
footer h4 {
|
||||
margin: 0 0 0.7rem;
|
||||
font-family: "Sora", sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
footer ul {
|
||||
margin: 0;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
footer li,
|
||||
footer p {
|
||||
color: #4b4b4b;
|
||||
font-size: 0.92rem;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
padding-top: 0.9rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer-bottom p {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: #6a6a67;
|
||||
}
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition: opacity 0.55s ease, transform 0.55s ease;
|
||||
}
|
||||
|
||||
.reveal.on {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.topbar {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
.nav-cta {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.service-strip {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.steps {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.case-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.topbar {
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
|
||||
.hero-copy,
|
||||
.method,
|
||||
.cases,
|
||||
.cta-band,
|
||||
footer {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
padding-top: 3.4rem;
|
||||
padding-bottom: 3.1rem;
|
||||
}
|
||||
|
||||
.service-strip {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.service-tile {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #d6d6d2;
|
||||
}
|
||||
|
||||
.steps {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user