/*
* landing.css - the lander stylesheet for iadb.com, findyournet.com and
* webdesignsnyc.com, all rendered by _universal/admin/lander.php.
*
* Recovered 2026-08-11 from the Wayback Machine's copy of iadb.co after the
* original was lost: it lived in an UNTRACKED styles/ directory on cdnjs.lol,
* was never committed, and a later cleanup removed it. No history, no backup
* on any of the three servers. Restored into css/, which IS tracked, rather
* than recreating the untracked styles/.
*
* Archive rewriting stripped - the @import and font url() entries pointed
* back at web.archive.org, which would have made every page load on three
* live sites depend on the archive staying up.
*
* Covers 38 of the 47 classes lander.php uses; the rest are Bootstrap grid
* classes already provided by the bootstrap 3.3.5 the page loads.
*/
/*
Contents:
1. Google Fonts Import
2. Common Styles
3. Sidebar
4. Main
5. Works Grid
6. Index Page
7. Project Page
8. About Page
9. Blog Page
10. Blog Single
11. Contact Page
12. Responsive
*/
/*
1. Google Fonts Import
MOVED OUT. The two @import lines that were here could not start
downloading until this file itself had arrived, so the fonts sat in a
request chain behind it. They are , one paragraph and
a small green button, laid out in a col-md-8 that left a third of a
1440px screen empty, and on 33 of the 45 products in the three families
it was JUST the button because no _about row existed.
Everything below is scoped to .lander-about so the index, blog and
contact pages are untouched.
*/
.lander-about {
max-width: 860px;
}
.lander-about > * + * {
margin-top: 44px;
}
.lander-about .page-title h1 {
margin: 0;
line-height: 1.15;
font-size: 42px;
letter-spacing: -0.01em;
}
.lander-about .page-title .tagline {
margin: 14px 0 0;
font-size: 21px;
line-height: 1.5;
color: #48ba86;
font-family: 'Lora', Georgia, serif;
}
/*
The product screenshot, and the LCP element of the page. aspect-ratio
plus the width/height attributes on the tag itself means the box is
reserved before the file arrives, so nothing below it moves when it
lands.
*/
.lander-about .lander-shot {
margin: 36px 0 0;
padding: 0;
border-radius: 6px;
overflow: hidden;
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
}
.lander-about .lander-shot img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1000 / 562;
}
/*
.lead used to be a wrapping the stored _about body, which is itself
two
elements. A
inside a
is auto-closed by every browser, so
the 19px lead size applied to nothing and the intro rendered at the same
15px as everything else. It is a
now, and the size is set on the
paragraphs inside it.
*/
.lander-about .lander-copy p {
font-size: 18px;
line-height: 1.75;
color: #4a4a4a;
}
.lander-about .lander-copy p:first-child {
font-size: 20px;
color: #2f2f2f;
}
/* The feature checklist. Two columns where there is room for two. */
.lander-about .lander-features h2 {
font-size: 24px;
margin: 0 0 22px;
line-height: 1.3;
}
.lander-about .lander-features ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 32px;
}
.lander-about .lander-features ul li {
position: relative;
padding-left: 30px;
font-size: 15px;
line-height: 1.7;
color: #6d6d6d;
}
/* A drawn check, so no icon font has to load for it. */
.lander-about .lander-features ul li:before {
content: '';
position: absolute;
left: 3px;
top: 8px;
width: 12px;
height: 6px;
border-left: 2px solid #48ba86;
border-bottom: 2px solid #48ba86;
transform: rotate(-45deg);
}
.lander-about .lander-features ul li strong {
display: block;
font-weight: 400;
color: #0e0e0e;
font-family: 'Lora', Georgia, serif;
font-size: 16px;
}
/* The closing paragraph, set apart as a pull quote. */
.lander-about .lander-closing {
border-left: 3px solid #48ba86;
padding: 4px 0 4px 26px;
}
.lander-about .lander-closing p {
margin: 0;
font-size: 17px;
line-height: 1.75;
font-family: 'Lora', Georgia, serif;
font-style: italic;
color: #4a4a4a;
}
.lander-about .lander-closing p + p {
margin-top: 14px;
}
/*
The call to action. .btn-xl did not exist anywhere - the markup asked
for it and got the 13px default .btn, which is why "Visit the Website"
was a small green chip at the bottom of an empty page.
*/
.btn.btn-xl {
font-size: 16px;
padding: 15px 30px;
border-bottom: none;
letter-spacing: 0.01em;
}
.btn.btn-xl:hover {
border-bottom: none;
}
.lander-about .lander-cta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
padding-top: 8px;
}
/* .btn carries `margin: auto`, which in a flex row centers the button and
pushes the note to the far edge. */
.lander-about .lander-cta .btn {
margin: 0;
}
.lander-about .lander-cta-note {
font-size: 13px;
color: #9b9b9b;
}
/* Every other product in the family, so the page is not a dead end. */
.lander-about .lander-more {
border-top: 1px solid rgba(0, 0, 0, 0.08);
padding-top: 34px;
}
.lander-about .lander-more h2 {
font-size: 20px;
margin: 0 0 20px;
}
.lander-about .lander-more-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 24px;
}
.lander-about .lander-more-grid li {
margin: 0;
padding: 0;
}
.lander-about .lander-more-grid a {
display: block;
padding: 12px 14px;
margin-left: -14px;
border: none;
border-radius: 4px;
transition: background-color 160ms;
}
.lander-about .lander-more-grid a:hover {
background-color: rgba(72, 186, 134, 0.08);
border: none;
}
.lander-about .lander-more-grid a strong {
display: block;
font-weight: 400;
font-family: 'Lora', Georgia, serif;
font-size: 16px;
color: #0e0e0e;
}
.lander-about .lander-more-grid a span {
display: block;
font-size: 13px;
line-height: 1.55;
color: #8b8b8b;
margin-top: 2px;
}
@media (max-width: 768px) {
.lander-about .page-title h1 { font-size: 32px; }
.lander-about .page-title .tagline { font-size: 18px; }
.lander-about .lander-features ul,
.lander-about .lander-more-grid { grid-template-columns: minmax(0, 1fr); }
.lander-about > * + * { margin-top: 34px; }
}
/* The contact page's h1 gets the same tagline treatment as an about page. */
#contact-page .page-title .tagline {
margin: 14px 0 0;
font-size: 19px;
line-height: 1.5;
color: #48ba86;
font-family: 'Lora', Georgia, serif;
}
/*
The admin-only "Edit this page" button on a product page. Outlined rather
than solid, so the visitor-facing "Visit " call to action next to it
stays the one that reads as primary. Only ever rendered for an admin IP.
*/
.lander-about .lander-cta .btn.lander-edit {
background-color: transparent;
color: #48ba86;
box-shadow: inset 0 0 0 1px rgba(72, 186, 134, 0.5);
}
.lander-about .lander-cta .btn.lander-edit:hover {
background-color: rgba(72, 186, 134, 0.08);
color: #32845e;
}