1 /* Snapshot of the devsite landing page styles for row and column layout. 2 * Renamed to ensure reference/index.html works if the devsite style changes. 3 */ 4 5 .sac-landing-row-theme-color .button-white:hover { 6 background: rgba(153, 153, 153, .3) 7 } 8 .sac-landing-row-theme-color .button-white:focus { 9 background: rgba(153, 153, 153, .5) 10 } 11 .sac-landing-row-theme-color .button-primary { 12 background: #fff; 13 color: #039be5 14 } 15 .sac-landing-row-theme-color .button-primary:active, 16 .sac-landing-row-theme-color .button-primary:focus { 17 background: #e1f3fc 18 } 19 .sac-landing-row-theme-color .button-primary:hover { 20 background: #c3e7f9 21 } 22 .sac-landing-row h2, 23 .sac-landing-row-large-headings .sac-landing-row-item-description>a>h3, 24 .sac-landing-row-large-headings .sac-landing-row-item-description>h3, 25 .sac-products-alphabet-letter-heading { 26 color: #757575; 27 font: 300 34px/40px Roboto, sans-serif; 28 letter-spacing: -.01em; 29 margin: 40px 0 20px 30 } 31 .sac-landing-row h3 { 32 border-bottom: 1px solid #ebebeb; 33 font: 300 24px/32px Roboto, sans-serif; 34 letter-spacing: -.01em; 35 margin: 40px 0 20px; 36 padding-bottom: 3px 37 } 38 .sac-landing-row-item-no-image h3, 39 .sac-landing-row h4 { 40 font: 400 20px/32px Roboto, sans-serif; 41 margin: 32px 0 12px; 42 padding: 0 43 } 44 @media screen and (max-width: 720px) { 45 .sac-landing-row h2, 46 .sac-products-alphabet-letter-heading { 47 font: 300 24px/32px Roboto, sans-serif 48 } 49 } 50 .sac-landing-row, 51 .sac-landing-row-column>.sac-landing-row-item+.sac-landing-row-item { 52 margin-top: 32px 53 } 54 .sac-landing-row:first-child { 55 margin-top: 0; 56 } 57 .sac-landing-row-colored, 58 .sac-landing-row-grey, 59 .sac-landing-row-theme-color { 60 margin: 40px -10000px -40px; 61 padding: 40px 10000px 62 } 63 .sac-landing-row-grey { 64 background-color: #f7f7f7 65 } 66 .sac-landing-row-cta { 67 background-color: #78c257; 68 color: #fff; 69 margin: 40px -10000px -40px; 70 padding: 40px 10000px; 71 text-align: center 72 } 73 .sac-landing-row-cta h3 { 74 font: 400 34px/40px Roboto, sans-serif; 75 letter-spacing: -.01em; 76 margin-bottom: 16px 77 } 78 .sac-landing-row h2 { 79 margin: 80px 0 32px 80 } 81 .sac-landing-row-colored>h2 { 82 margin-top: 0 83 } 84 .sac-landing-row-description { 85 margin-bottom: 32px 86 } 87 h2+.sac-landing-row-description { 88 margin-top: -16px 89 } 90 .sac-landing-row:first-child h2, 91 .sac-landing-row-large-headings h3, 92 .sac-landing-row-item-description>h2 { 93 margin-top: 0 94 } 95 .sac-landing-row h2, 96 .sac-landing-row-item h3 { 97 border-bottom: 0 98 } 99 .sac-landing-row-column, 100 .sac-landing-row-item { 101 display: inline-block; 102 vertical-align: top 103 } 104 .sac-landing-row-column+.sac-landing-row-column, 105 .sac-landing-row>.sac-landing-row-item+.sac-landing-row-item { 106 margin-left: 40px 107 } 108 .sac-landing-row-item-buttons { 109 margin: 8px 0 0 -12px 110 } 111 .sac-landing-row-item-buttons .button { 112 margin: 4px 4px 4px 12px 113 } 114 .sac-landing-row-item-buttons .button-white:not(.button-raised), 115 .sac-landing-row-item-buttons .button-white:not(.button-raised)+.button-white:not(.button-raised) { 116 margin: 0 4px 117 } 118 .sac-landing-row-cta .sac-landing-row-item-buttons { 119 margin: 24px 0 0 120 } 121 p+.sac-landing-row-item-buttons { 122 margin-top: -8px 123 } 124 .sac-landing-row-1-up>.sac-landing-row-column, 125 .sac-landing-row-1-up>.sac-landing-row-item, 126 .sac-landing-row-column>.sac-landing-row-item { 127 width: 100% 128 } 129 .sac-landing-row-2-up>.sac-landing-row-column, 130 .sac-landing-row-2-up>.sac-landing-row-item { 131 width: calc((100% - 40px)/2) 132 } 133 .sac-landing-row-3-up>.sac-landing-row-column, 134 .sac-landing-row-3-up>.sac-landing-row-item { 135 width: calc((100% - 80px)/3) 136 } 137 .sac-landing-row-4-up>.sac-landing-row-column, 138 .sac-landing-row-4-up>.sac-landing-row-item { 139 width: calc((100% - 120px)/4) 140 } 141 .sac-landing-row-item-icon { 142 color: #757575; 143 font-size: 48px; 144 float: left; 145 height: 48px; 146 margin-left: 4px; 147 width: 48px 148 } 149 .sac-landing-row-item-icon-container { 150 background: #78c257; 151 border-radius: 50%; 152 box-shadow: none; 153 float: left; 154 height: 56px; 155 width: 56px; 156 transition: box-shadow .2s 157 } 158 :link>.sac-landing-row-item-icon-container:hover, 159 :focus>.sac-landing-row-item-icon-container { 160 box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 4px rgba(0, 0, 0, .28) 161 } 162 .sac-landing-row-item-icon-white { 163 color: #fff; 164 font-size: 36px; 165 height: 36px; 166 margin: 10px; 167 width: 36px 168 } 169 .sac-landing-row-item-icon-description { 170 margin-left: 76px 171 } 172 .sac-landing-row-item-code, 173 .sac-landing-row-item-image, 174 .sac-landing-row-item-video, 175 .sac-landing-row-item-youtube { 176 margin-bottom: 32px; 177 width: 100% 178 } 179 .sac-landing-row-item-image, 180 .sac-landing-row-item-video { 181 display: block 182 } 183 .sac-landing-row-item-code pre { 184 margin-top: 0 185 } 186 .sac-landing-row-item-image { 187 background: #ebebeb 188 } 189 .sac-landing-row-no-image-background .sac-landing-row-item-image { 190 background: 0 191 } 192 .sac-landing-row-item-custom-image { 193 background: #78c257 194 } 195 .sac-landing-row-item-custom-image-icon { 196 color: #fff; 197 display: block; 198 margin: 0 auto; 199 opacity: .8 200 } 201 .sac-landing-row-1-up .sac-landing-row-item-custom-image { 202 padding: calc((56.25% - 256px)/2) 0 203 } 204 .sac-landing-row-1-up .sac-landing-row-item-custom-image-icon { 205 font-size: 256px; 206 width: 256px 207 } 208 .sac-landing-row-2-up .sac-landing-row-item-custom-image, 209 .sac-landing-row-50 .sac-landing-row-item-custom-image { 210 padding: calc((56.25% - 192px)/2) 0 211 } 212 .sac-landing-row-2-up .sac-landing-row-item-custom-image-icon, 213 .sac-landing-row-50 .sac-landing-row-item-custom-image-icon { 214 font-size: 192px; 215 width: 192px 216 } 217 .sac-landing-row-3-up .sac-landing-row-item-custom-image, 218 .sac-landing-row-67 .sac-landing-row-item-custom-image { 219 padding: calc((56.25% - 128px)/2) 0 220 } 221 .sac-landing-row-3-up .sac-landing-row-item-custom-image-icon, 222 .sac-landing-row-67 .sac-landing-row-item-custom-image-icon { 223 font-size: 128px; 224 width: 128px 225 } 226 .sac-landing-row-4-up .sac-landing-row-item-custom-image, 227 .sac-landing-row-75 .sac-landing-row-item-custom-image { 228 padding: calc((56.25% - 96px)/2) 0 229 } 230 .sac-landing-row-4-up .sac-landing-row-item-custom-image-icon, 231 .sac-landing-row-75 .sac-landing-row-item-custom-image-icon { 232 font-size: 96px; 233 width: 96px 234 } 235 .sac-landing-row-item-youtube { 236 overflow: hidden; 237 padding-bottom: 56.25%; 238 position: relative 239 } 240 .sac-landing-row-item-youtube iframe { 241 height: 101%; 242 left: -.5%; 243 position: absolute; 244 top: -.5%; 245 width: 101% 246 } 247 .sac-landing-row-1-up .sac-landing-row-item-code, 248 .sac-landing-row-1-up .sac-landing-row-item-image, 249 .sac-landing-row-1-up .sac-landing-row-item-video, 250 .sac-landing-row-1-up .sac-landing-row-item-youtube { 251 float: right; 252 margin: 0 0 0 40px; 253 width: calc((100% - 20px)*2/3) 254 } 255 .sac-landing-row-1-up .sac-landing-row-item-youtube { 256 padding-bottom: calc((100% - 20px)*2/3*.5625) 257 } 258 .sac-landing-row-1-up .sac-landing-row-item-custom-image { 259 padding: calc(((100% - 20px)*2/3*.5625 - 256px)/2) 0 260 } 261 .sac-landing-row-50 .sac-landing-row-item-youtube { 262 padding-bottom: calc((100% - 40px)/2*.5625) 263 } 264 .sac-landing-row-50 .sac-landing-row-item-custom-image { 265 padding: calc(((100% - 40px)/2*.5625 - 192px)/2) 0 266 } 267 .sac-landing-row-67 .sac-landing-row-item-youtube { 268 padding-bottom: calc((100% - 80px)/3*.5625) 269 } 270 .sac-landing-row-67 .sac-landing-row-item-custom-image { 271 padding: calc(((100% - 80px)/3*.5625 - 128px)/2) 0 272 } 273 .sac-landing-row-75 .sac-landing-row-item-youtube { 274 padding-bottom: calc((100% - 120px)/4*.5625) 275 } 276 .sac-landing-row-75 .sac-landing-row-item-custom-image { 277 padding: calc(((100% - 120px)/4*.5625 - 128px)/2) 0 278 } 279 .sac-landing-row-logos .sac-landing-row-item-custom-image { 280 background: 0; 281 float: none; 282 margin: 0; 283 padding: 0 284 } 285 .sac-landing-row-logos .sac-landing-row-item-custom-image-icon { 286 opacity: 1; 287 width: 96px 288 } 289 .sac-landing-row-logos .sac-landing-row-item-description { 290 text-align: center 291 } 292 .sac-landing-row-1-up .sac-landing-row-item-image-left { 293 float: left; 294 margin: 0 40px 0 0 295 } 296 .sac-landing-row-1-up .sac-landing-row-item-description { 297 float: left; 298 width: calc((100% - 80px)/3) 299 } 300 .sac-landing-row-50 .sac-landing-row-item-description { 301 width: calc((100% - 40px)/2) 302 } 303 .sac-landing-row-1-up>.sac-landing-row-item-no-image>.sac-landing-row-item-description, 304 .sac-landing-row-67 .sac-landing-row-item-description { 305 width: calc((100% - 20px)*2/3) 306 } 307 .sac-landing-row-75 .sac-landing-row-item-description { 308 width: calc((100% - 15px)*3/4) 309 } 310 .sac-landing-row-50 .sac-landing-row-item-code, 311 .sac-landing-row-50 .sac-landing-row-item-image, 312 .sac-landing-row-50 .sac-landing-row-item-video, 313 .sac-landing-row-50 .sac-landing-row-item-youtube { 314 width: calc((100% - 40px)/2) 315 } 316 .sac-landing-row-67 .sac-landing-row-item-code, 317 .sac-landing-row-67 .sac-landing-row-item-image, 318 .sac-landing-row-67 .sac-landing-row-item-video, 319 .sac-landing-row-67 .sac-landing-row-item-youtube { 320 width: calc((100% - 80px)/3) 321 } 322 .sac-landing-row-75 .sac-landing-row-item-code, 323 .sac-landing-row-75 .sac-landing-row-item-image, 324 .sac-landing-row-75 .sac-landing-row-item-video, 325 .sac-landing-row-75 .sac-landing-row-item-youtube { 326 width: calc((100% - 120px)/4) 327 } 328 .sac-landing-row-cta>.sac-landing-row-item-no-image>.sac-landing-row-item-description, 329 .sac-landing-row-100>.sac-landing-row-item-no-image>.sac-landing-row-item-description { 330 width: 100% 331 } 332 .sac-landing-row h3:first-child, 333 .sac-landing-row h4:first-child, 334 .sac-landing-row h5:first-child, 335 .sac-landing-row h6:first-child, 336 .sac-landing-row p:first-child, 337 .sac-landing-row h4+p { 338 margin-top: 0 339 } 340 .sac-landing-row p:last-child { 341 margin-bottom: 0 342 } 343 .sac-landing-row-item-description-callout { 344 font-weight: bold 345 } 346 .sac-landing-row-item-description-feature { 347 margin-top: 16px; 348 position: relative 349 } 350 .sac-landing-row-item-description-feature+.sac-landing-row-item-description-feature { 351 margin: 0 352 } 353 .sac-landing-row-item-description-feature-link { 354 border-bottom: 1px solid #ebebeb; 355 font-weight: 500; 356 padding: 12px 0 11px 357 } 358 .sac-landing-row-item-description-feature-tooltip { 359 background: #455a64; 360 box-shadow: 0 1px 4px rgba(0, 0, 0, .37); 361 color: rgba(255, 255, 255, .7); 362 font: 14px/20px Roboto, sans-serif; 363 min-width: 200px; 364 opacity: 0; 365 padding: 24px; 366 position: absolute; 367 transition: opacity .2s, visibility .2s; 368 visibility: hidden; 369 width: 67%; 370 z-index: 10020 371 } 372 .no-touch .sac-landing-row-item-description-feature-link:hover+.sac-landing-row-item-description-feature-tooltip { 373 opacity: 1; 374 visibility: visible 375 } 376 .sac-landing-row-item-description-feature-tooltip:before { 377 border-bottom: 8px solid #455a64; 378 border-left: 8px solid transparent; 379 border-right: 8px solid transparent; 380 content: ''; 381 position: absolute; 382 top: -8px 383 } 384 .sac-landing-row-item-description-feature-tooltip h3 { 385 color: white; 386 margin-bottom: 8px; 387 padding: 0 388 } 389 @media screen and (max-width: 1000px) { 390 .sac-landing-row-2-up:not(.sac-landing-row-logos)>.sac-landing-row-item:not(.sac-landing-row-item-no-image), 391 .sac-landing-row-3-up:not(.sac-landing-row-logos)>.sac-landing-row-item:not(.sac-landing-row-item-no-image) { 392 width: 100% 393 } 394 .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-column, 395 .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-item { 396 width: calc((100% - 40px)/2) 397 } 398 .sac-landing-row:not(.sac-landing-row-logos)>.sac-landing-row-item+.sac-landing-row-item { 399 margin: 40px 0 0 400 } 401 .sac-landing-row:not(.sac-landing-row-logos)>.sac-landing-row-column+.sac-landing-row-column, 402 .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-item:nth-of-type(2) { 403 margin: 0 0 0 40px 404 } 405 .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-column:nth-of-type(3) { 406 margin: 40px 0 0 407 } 408 .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-column:nth-of-type(4), 409 .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-item:nth-of-type(4) { 410 margin: 40px 0 0 40px 411 } 412 .sac-landing-row-item-code, 413 .sac-landing-row:not(.sac-landing-row-logos) .sac-landing-row-item-image, 414 .sac-landing-row-item-video, 415 .sac-landing-row-item-youtube, 416 .sac-landing-row-1-up .sac-landing-row-item-code, 417 .sac-landing-row-1-up .sac-landing-row-item-image, 418 .sac-landing-row-1-up .sac-landing-row-item-video, 419 .sac-landing-row-1-up .sac-landing-row-item-youtube, 420 .sac-landing-row-1-up .sac-landing-row-item-image-left { 421 float: right; 422 margin: 0 0 0 40px; 423 width: calc((100% - 40px)/2) 424 } 425 .sac-landing-row-4-up .sac-landing-row-item-code, 426 .sac-landing-row-4-up:not(.sac-landing-row-logos) .sac-landing-row-item-image, 427 .sac-landing-row-4-up .sac-landing-row-item-video, 428 .sac-landing-row-4-up .sac-landing-row-item-youtube { 429 float: none; 430 margin: 0 0 32px 0; 431 width: 100% 432 } 433 .sac-landing-row-item-youtube, 434 .sac-landing-row-1-up .sac-landing-row-item-youtube { 435 padding-bottom: calc((100% - 40px)/2*.5625) 436 } 437 .sac-landing-row-1-up .sac-landing-row-item-custom-image, 438 .sac-landing-row-2-up .sac-landing-row-item-custom-image, 439 .sac-landing-row-3-up .sac-landing-row-item-custom-image { 440 padding: calc(((100% - 40px)/2*.5625 - 128px)/2) 0 441 } 442 .sac-landing-row-4-up .sac-landing-row-item-youtube { 443 padding-bottom: 56.25% 444 } 445 .sac-landing-row-4-up .sac-landing-row-item-custom-image { 446 padding: calc((56.25% - 128px)/2) 0 447 } 448 .sac-landing-row-1-up .sac-landing-row-item-custom-image-icon, 449 .sac-landing-row-2-up .sac-landing-row-item-custom-image-icon, 450 .sac-landing-row-3-up .sac-landing-row-item-custom-image-icon, 451 .sac-landing-row-4-up .sac-landing-row-item-custom-image-icon { 452 font-size: 128px; 453 width: 128px 454 } 455 .sac-landing-row-logos .sac-landing-row-item-custom-image { 456 margin: 0; 457 padding: 0 458 } 459 .sac-landing-row-logos .sac-landing-row-item-custom-image-icon { 460 width: 96px 461 } 462 .sac-landing-row .sac-landing-row-item-description, 463 .sac-landing-row-1-up .sac-landing-row-item-description { 464 float: left; 465 width: calc((100% - 40px)/2) 466 } 467 .sac-landing-row-4-up .sac-landing-row-item-description { 468 float: none; 469 width: 100% 470 } 471 .sac-landing-row>.sac-landing-row-item-no-image { 472 float: none; 473 width: calc((100% - 40px)/2) 474 } 475 .sac-landing-row-3-up>.sac-landing-row-item-no-image { 476 width: calc((100% - 80px)/3) 477 } 478 .sac-landing-row-1-up>.sac-landing-row-item-no-image, 479 .sac-landing-row-1-up>.sac-landing-row-item-no-image>.sac-landing-row-item-description { 480 width: 100% 481 } 482 .sac-landing-row:not(.sac-landing-row-4-up)>.sac-landing-row-item-no-image+.sac-landing-row-item-no-image { 483 margin: 0 0 0 40px 484 } 485 .sac-landing-row-item-no-image .sac-landing-row-item-description { 486 float: none; 487 width: 100% 488 } 489 .sac-landing-row-item-no-image .sac-landing-row-item-icon-description { 490 width: calc(100% - 76px) 491 } 492 } 493 @media screen and (max-width: 720px) { 494 .sac-landing-row-2-up>.sac-landing-row-column, 495 .sac-landing-row-3-up>.sac-landing-row-column, 496 .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-column, 497 .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-item { 498 width: 100% 499 } 500 .sac-landing-row:not(.sac-landing-row-logos)>.sac-landing-row-column+.sac-landing-row-column, 501 .sac-landing-row:not(.sac-landing-row-logos)>.sac-landing-row-item+.sac-landing-row-item, 502 .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-column:nth-of-type(even), 503 .sac-landing-row-4-up:not(.sac-landing-row-logos)>.sac-landing-row-item:nth-of-type(even) { 504 margin: 40px 0 0 505 } 506 .sac-landing-row-item-code, 507 .sac-landing-row:not(.sac-landing-row-logos) .sac-landing-row-item-image, 508 .sac-landing-row-item-video, 509 .sac-landing-row-item-youtube, 510 .sac-landing-row-1-up .sac-landing-row-item-code, 511 .sac-landing-row-1-up .sac-landing-row-item-image, 512 .sac-landing-row-1-up .sac-landing-row-item-video, 513 .sac-landing-row-1-up .sac-landing-row-item-youtube, 514 .sac-landing-row-1-up .sac-landing-row-item-image-left { 515 float: none; 516 margin: 0 0 32px; 517 width: 100% 518 } 519 .sac-landing-row-item-youtube, 520 .sac-landing-row-1-up .sac-landing-row-item-youtube { 521 padding-bottom: 56.25% 522 } 523 .sac-landing-row-1-up .sac-landing-row-item-custom-image, 524 .sac-landing-row-2-up .sac-landing-row-item-custom-image, 525 .sac-landing-row-3-up .sac-landing-row-item-custom-image { 526 padding: calc((56.25% - 128px)/2) 0 527 } 528 .sac-landing-row-1-up .sac-landing-row-item-custom-image-icon, 529 .sac-landing-row-2-up .sac-landing-row-item-custom-image-icon, 530 .sac-landing-row-3-up .sac-landing-row-item-custom-image-icon { 531 font-size: 128px; 532 width: 128px 533 } 534 .sac-landing-row-logos>.sac-landing-row-column, 535 .sac-landing-row-logos>.sac-landing-row-item { 536 width: calc((100% - 40px)/2) 537 } 538 .sac-landing-row-logos>.sac-landing-row-column:nth-of-type(2), 539 .sac-landing-row-logos>.sac-landing-row-item:nth-of-type(2) { 540 margin: 0 0 0 40px 541 } 542 .sac-landing-row-logos>.sac-landing-row-column:nth-of-type(3), 543 .sac-landing-row-logos>.sac-landing-row-item:nth-of-type(3) { 544 margin: 40px 0 0 545 } 546 .sac-landing-row-logos>.sac-landing-row-column:nth-of-type(4), 547 .sac-landing-row-logos>.sac-landing-row-item:nth-of-type(4) { 548 margin: 40px 0 0 40px 549 } 550 .sac-landing-row-3-up.sac-landing-row-logos>.sac-landing-row-column, 551 .sac-landing-row-3-up.sac-landing-row-logos>.sac-landing-row-item { 552 width: calc((100% - 32px)/3) 553 } 554 .sac-landing-row-3-up.sac-landing-row-logos>.sac-landing-row-column+.sac-landing-row-column, 555 .sac-landing-row-3-up.sac-landing-row-logos>.sac-landing-row-item+.sac-landing-row-item { 556 margin: 0 0 0 16px 557 } 558 .sac-landing-row-logos .sac-landing-row-item-custom-image { 559 margin: 0; 560 padding: 0 561 } 562 .sac-landing-row-logos .sac-landing-row-item-custom-image-icon { 563 width: 96px 564 } 565 .sac-landing-row-item-description:not(.sac-landing-row-item-icon-description), 566 .sac-landing-row-1-up .sac-landing-row-item-description { 567 float: none; 568 margin: 0; 569 width: 100% 570 } 571 .sac-landing-row .sac-landing-row-item-no-image { 572 width: 100% 573 } 574 .sac-landing-row-item-no-image+.sac-landing-row-item-no-image, 575 .sac-landing-row>.sac-landing-row-item-no-image+.sac-landing-row-item-no-image:nth-of-type(even) { 576 margin: 40px 0 0 577 } 578 .sac-landing-row-cta .sac-landing-row-item-description { 579 font: 400 16px/24px Roboto, sans-serif 580 } 581 } 582